主页 / 问题 / 1315590
Accepted
Александр
Asked:2022-08-09 06:31:24 +0000 UTC2022-08-09 06:31:24 +0000 UTC

CSS动画圆点移动

  • 772

你能告诉我如何实现点沿圆的移动吗？

无法通过关键帧实现点的移动。我将不胜感激一个示例实现。

需要这样的东西：在此处输入图像描述

css

2 个回答

  1. Best Answer

    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>

    • 6

  2. 像这样的东西：

    @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>），但我不确定此方法是否有效。

    • 3

相关问题