时间戳

首页 > 解决方案 > 围绕另一个大圆圈的圆周动画一个圆圈

css - 围绕另一个大圆圈的圆周动画一个圆圈

问题描述

我想只使用 CSS 围绕大圆圈的圆周移动一个小圆圈。

@keyframes moveAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#small {
  animation: moveAround 2s infinite linear;
}
<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="circles">
      <circle id="big" cx="60" cy="50" r="30" fill="white" stroke="#2493AB" stroke-width="20" />
      <circle id="small" cx="60" cy="20" r="10" fill="#EF6868" />
    </g>
  </svg>

标签： cssanimationsvg

解决方案

您必须指定圆应该围绕哪个坐标旋转。默认情况下，这是坐标0,0，但您希望它绕大圆的中心运行。

在 CSS 中，您可以使用transform-origin执行此操作：

#small {
    transform-origin: 60px 50px;
    animation: moveAround 2s infinite linear;
}
@keyframes moveAround {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="circles">
        <circle id="big" cx="60" cy="50" r="30" fill="white" stroke="#2493AB" stroke-width="20" />
        <circle id="small" cx="60" cy="20" r="10" fill="#EF6868" />
    </g>
</svg>

推荐阅读