Подскажите, пожалуйста, как реализовать движение точки по окружности?
Не получается реализовать движение точек через keyframe. Буду признателен за пример реализации.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПодскажите, пожалуйста, как реализовать движение точки по окружности?
Не получается реализовать движение точек через keyframe. Буду признателен за пример реализации.
Простейшая анимация псевдоэлементов с transform: rotate()
и разной продолжительностью анимации:
.orbit {
position: relative;
left: 0; top: 0;
height: 47.1875em; width: 47.1875em;
border-radius: 50%;
overflow: hidden;
background-image: radial-gradient( #0000 calc(66% - 2px), #17a86666 calc(66% - 1px), #0000 calc(66%));
filter: drop-shadow(0 0.3125em 0.3125em #17a86666);
/* Масштаб фигуры */
font-size: clamp(1px, calc(90vh / 48), calc(90vw / 48));
}
.orbit::before,
.orbit::after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0; z-index: 1;
animation: spin linear infinite;
}
.orbit::before {
background-image: radial-gradient( circle closest-side at 50% 1.6875em, #17a866 1.25em, #0000 1.3125em);
animation-duration: 5s;
}
.orbit::after {
background-image: radial-gradient( circle closest-side at 50% 1.6875em, #17a866 0.625em, #0000 0.6875em);
animation-duration: 3s;
}
@keyframes spin { to { transform: rotate(1turn); } }
body { margin: 0; min-height: 100vh; display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center; }
<div class="orbit"></div>
Как то так:
@keyframes circle {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
.circle {
width: 40px; /*Ширина блока*/
height: 40px; /*Высота блока*/
position: absolute; /*Абсолютное позиционирование*/
top: 200px; /*Позиция от верха окна*/
left: 50%; /*Позиция от левого края окна*/
margin: -20px; /*Отступы*/
font-size: 100px; /*Размер шрифта (и соответственно, круга 🔴)*/
animation: circle 3s infinite linear; /*Анимация*/
}
<div class="circle">🔴</div>
Можно попробовать с картинкой (<img>
), но я не уверен в работоспособности этого способа.