[分享]css中小圆怎么绕着大圆转

CSS中小圆怎么绕着大圆转？

.circle {
  position: absolute;
  top: 50%; /* 将圆心设置在容器的中心 */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%; /* 绘制一个圆形 */
  background-color: red;
}

.dot {
  position: absolute;
  top: 0%;
  left: 50%; /* 将小圆放置在大圆顶部中心 */
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%; /* 绘制一个圆形 */
  background-color: blue;
  animation: rotate-circle 5s linear infinite; /* 使用关键帧动画控制小圆的运动轨迹 */
}

@keyframes rotate-circle {
  from {
    transform: rotate(0deg) translate(100px) rotate(0deg); /* 小圆半径为100px，初始角度为0度 */
  }
  to {
    transform: rotate(360deg) translate(100px) rotate(-360deg); /* 小圆半径为100px，绕着大圆一圈后返回原点 */
  }
} 

以上代码中，我们首先创建了一个圆形容器，并让其的圆心位于容器中心。然后我们再在大圆顶部中心放置一个小圆，并让其绕着大圆旋转。这里我们使用了关键帧动画，让小圆的运动轨迹是以大圆为基础，绕着大圆旋转一圈，再返回到初始位置。这样就实现了小圆绕着大圆转的效果。