安装

前提：b站看见某个机构的视频，感觉挺好玩的，写下来做记录 环境 vue2, sass, sass-loader

效果

上代码

有几个要点

1. 旋转的中心必须是大圆圈的中心
2. 将 5 张图片均匀分布
3. 图片自身反向旋转
4. 容器应用一个动画，图片应用反向这个动画
5. sass 是不参与运行的，css变量参与运行

<template>
  <div class="imgWrapper">
    <div class="item">
      <img src="@/assets/ikun12.jpg" alt="" />
    </div>
    <div class="item">
      <img src="@/assets/ikun13.jpg" alt="" />
    </div>
    <div class="item">
      <img src="@/assets/ikun14.jpg" alt="" />
    </div>
    <div class="item">
      <img src="@/assets/ikun15.jpg" alt="" />
    </div>
    <div class="item">
      <img src="@/assets/ikun16.jpg" alt="" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

$imgSize: 200px;
$size: 600px;
$n: 5;
$imgDeg: 360deg / $n;

.imgWrapper {
  animation: rotation linear infinite 20s;
  width: 600px;
  height: 600px;
  border: 2px solid black;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: start;

  .item {
    position: absolute;
    top: -100px;
    transform-origin: center $size / 2 + $imgSize / 2;

    @for $i from 1 through $n {
      &:nth-child(#{$i}) {
        $ndeg: ($i - 1) * $imgDeg;
        transform: rotate($ndeg);
        img {
          --initDeg: #{-$ndeg};
          transform: rotate(-$ndeg);
          animation: rotation linear infinite 20s reverse;
        }
      }
    }
  }
}

@keyframes rotation {
  to {
    transform: rotate(calc(360deg + var(--initDeg, 0deg)));
  }
}
.imgWrapper:hover {
  animation-play-state: paused;
  .item img {
    animation-play-state: paused;
  }
}
</style>