4

Подскажите, пожалуйста, как реализовать движение точки по окружности?

Не получается реализовать движение точек через keyframe. Буду признателен за пример реализации.

Нужно что-то подобное: введите сюда описание изображения

1

2 ответа 2

6

Простейшая анимация псевдоэлементов с 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>

3

Как то так:

@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>), но я не уверен в работоспособности этого способа.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.