css 摩天轮特效

scss如下
// 定义变量
$site: 640px; // 摩天轮轮盘大小
$imgSize: $site / 8; // 图片大小，为摩天轮轮盘大小的？分之一
$num: 4; // 图片的数量
$pDeg: 360 / $num; // 每个图片之间的角度差
$s: 100; // 动画持续时间（秒）
// 容器样式
.container {
  width: $site; // 宽度为 $site
  height: $site; // 高度为 $site
  outline: 1px solid #000; // 边框
  margin: 0 auto; // 水平居中
  position: relative; // 相对定位，使子元素可以绝对定位
  margin-top: 60px; // 上边距
  display: flex; // 使用 Flexbox 布局
  justify-content: center; // 水平居中
  align-items: start; // 垂直对齐方式为顶部
  border-radius: 50%; // 圆角，创建圆形
  animation: rotate #{$s}s linear infinite; // 无限循环的旋转动画，持续时间为 $s 秒
  background: url(../img/43aff010f473dea6b7796efb72200fdf.png) no-repeat center; // 背景图片
  background-size: #{$site * 1.03} auto; // 背景图片大小，宽度为 $site 的 103%，高度自适应
}
// 项目样式
.item {
  position: absolute; // 绝对定位
  top: -20px; // 从顶部偏移 -20px
  transform-origin: center $imgSize/2 + $site/2; // 旋转中心点
  @for $i from 1 through $num { // 循环生成每个项目
    &:nth-child(#{$i}) { // 第 i 个项目
      $deg: $pDeg * ($i - 1); // 计算旋转角度
      transform: rotate(#{$deg}deg); // 旋转项目
      img {
        width: $imgSize; // 图片宽度
        --initDeg: #{-$deg}deg; // 初始化角度变量
        transform: rotate(#{-$deg}deg); // 旋转图片，使其保持水平
        animation: rotate #{$s}s linear infinite reverse; // 无限循环的反向旋转动画，持续时间为 $s 秒
      }
    }
  }
}
// 关键帧动画
@keyframes rotate {
  to {
    transform: rotate(calc(360deg + var(--initDeg, 0deg))); // 旋转 360 度加上初始角度
  }
}
 
 
html如下
 
          <div class="container">
              <div class="item">
                  <img src="./img/箭头-右.png" alt="">
              </div>
              <div class="item">
                  <img src="./img/箭头-右.png" alt="">
              </div>
              <div class="item">
                  <img src="./img/箭头-右.png" alt="">
              </div>
              <div class="item">
                  <img src="./img/箭头-右.png" alt="">
              </div>
              <div class="item">
                  <img src="./img/箭头-右.png" alt="">
              </div>
          </div>