[分享]css八张图片以圆形轨迹旋转

今天我们来谈一谈如何用CSS制作八张图片围绕着圆形轨迹进行旋转。

.rotate{
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  
  animation: circle-rotating 12s linear infinite;
}
.rotate img{
  position: absolute;
  width: 50px; height: 50px;
  margin: -25px 0 0 -25px;
  top: 50%; left: 50%;
}
@keyframes circle-rotating{
  from{ transform:rotate(0) translate(100px) rotate(0); }
  to{ transform:rotate(360deg) translate(100px) rotate(-360deg); }
} 

首先，我们需要先在一个固定大小的容器（这里是200px x 200px）内放置八张图片，然后让这些图片绕着一个圆心旋转。我们可以用CSS的animation属性来定义一个名为"circle-rotating"的动画。

在"circle-rotating"动画中，我们先将图片旋转0度并向右平移100px，再将整个容器旋转0度。这是动画开始时的状态。

然后，我们将整个容器向右旋转360度并向右平移100px，同时将整个容器再次旋转360度。这是动画结束时的状态。我们将这个动画设置为无限循环，便可让八张图片一直沿着圆形轨迹旋转下去。

最后，我们需要让每个图片保持在容器中心。因此，我们给每个图片设置了一个绝对位置，并将它们的上、左边距都设为50%。同时，我们也需要将图片的大小设置合适，以免它们互相遮盖。

这样，我们就成功地用CSS制作了八张图片围绕着圆形轨迹旋转的动画效果。非常酷炫，是吧？