HTML CSS 旋转图片动画 - 6 个图片旋转原型

以下是一个使用 HTML 和 CSS 实现旋转图片的示例，其中包含六个图片旋转原型：

HTML 代码：

<div class='container'>
  <div class='circle'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='circle'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='circle'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='circle'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='circle'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
  <div class='circle'>
    <img src='https://via.placeholder.com/150' alt='image'>
  </div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.circle {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 20px;
  border-radius: 50%;
  overflow: hidden;
  transform-origin: center;
  animation: rotate 5s infinite linear;
}

.circle img {
  position: absolute;
  width: 100%;
  height: 100%;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.circle:nth-child(1) {
  animation-duration: 3s;
}

.circle:nth-child(2) {
  animation-duration: 4s;
}

.circle:nth-child(3) {
  animation-duration: 5s;
}

.circle:nth-child(4) {
  animation-duration: 6s;
}

.circle:nth-child(5) {
  animation-duration: 7s;
}

.circle:nth-child(6) {
  animation-duration: 8s;
}

解释：

1. .container 使用 flex 布局居中显示六个 .circle 元素。
2. .circle 元素使用相对定位，宽高为 150px，圆角为 50%，并设置 overflow: hidden 让图片超出边界被隐藏。
3. transform-origin: center 设置旋转中心为元素中心。
4. animation: rotate 5s infinite linear 给元素添加旋转动画，持续时间为 5s，无限循环，匀速运动。
5. .circle img 绝对定位于 .circle 元素内，占据整个元素空间。
6. @keyframes rotate 定义旋转动画，从 0% 到 100% 旋转 360 度。
7. .circle:nth-child(1) 到 .circle:nth-child(6) 分别设置不同的 animation-duration 值，使六个元素的旋转速度不同。