😎 » Анимация css » Анимация вращения по кругу на CSS
Символы юникода Notepad++ Сокращение Типографика Начало css index.html Микроразметка style.css Блоки DLE Теги DLE
244 0  

Анимация вращения по кругу на CSS

Есть два способа анимации вращения по кругу на CSS: с помощью вращения border и через вращения одного блока вокруг другого.

1. Вариант. Вращения border

1. Вариант. Вращения border


2. Вариант. Вращения одного вокруг другого.

Виконуваний код:

<div> <h2>1. Вариант. Вращения border</h2> <div class="rotate"></div> <br> <h2>2. Вариант. Вращения одного вокруг другого.</h2> <div style="position:relative; margin:20px 0; width:300px; height:300px;"> <span class="sun"></span> <span class="earth2"></span> </div> </div> <style> /*Код CSS для первого варианта*/ @keyframes anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .rotate { display: inline-block; border: 30px solid rgba(0, 0, 0, 0.2); border-left-color: orange; border-right-color: orange; border-radius: 50%; width: 200px; height: 200px; animation: anim 1.1s linear infinite; } /*Код CSS - вариант2 */ .sun { background: yellow; border-radius: 50px; width: 50px; height: 50px; position: absolute; top: 150px; left: 150px; } .earth { background: linear-gradient(blue, navy); border-radius: 50px; width: 20px; height: 20px; position: absolute; top: 250px; left: 250px; animation: moving 1s infinite linear; } .earth2 { background: linear-gradient(blue, navy); border-radius: 50px; width: 20px; height: 20px; position: absolute; top: 250px; left: 250px; animation: moving 4s infinite linear; transform-origin: -80px -80px; } @keyframes moving { 100% {transform: rotate(-360deg);} } </style>
‹ Попередня сторінка Наступна сторінка ›

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023