效果预览

思路图解

1. 其中，黄色为显示区域
2. 蓝色为图片，且应与显示区域大小一致
3. 红色为动画转动区域
4. 转动区域的边缘，即红色圈的边缘在显示区域和图片的圆点上

重点解决问题

1. 如何将照片放置在转动区域的各个位置上？
   1. 利用transform-origin改变图片转动圆点,而transform-origin的x轴为center,y轴方向为转动区域圆的半径R。
   2. 利用rotate函数旋转角度
2. 若图片为任意多个，如何计算转动区域的半径？

（图片画的不标准）

如图，若图片半径r已知，等腰三角形顶角已，可得出R为 r / sin(角度/2)

html结构

  <div class="imgRotateContainer">
    <div class="imgRArea">
      <img src="../img/img1.png" />
      <img src="../img/img2.png" />
      <img src="../img/img3.png" />
      <img src="../img/img4.png" />
      <img src="../img/img1.png" />
      <img src="../img/img2.png" />
      <img src="../img/img3.png" />
      <img src="../img/img4.png" />
      <img src="../img/img3.png" />
      <img src="../img/img4.png" />
    </div>
  </div>

less代码

@size: 200px; //可视区域的大小，也是每张图片的大小
@r: (@size / 2);
@n: 10;
@rDeg: (360deg / @n);
@R: (@r / sin(@rDeg / 2));
@eachPercentage: (1 / @n) * 100%;
@stopInterval: .3s;
@eachInterval: 2s;
@duration: (@stopInterval + @eachInterval) * @n;
@backPercentage: (@stopInterval / @duration) * @eachPercentage;

.imgRotateContainer{
  width: @size;
  height: @size;
  // border: 1px solid red;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  .imgRArea{
    width: 2 * @R;
    height: 2 * @R;
    // border: 1px solid yellow;
    border-radius: 50%;
    position: absolute;
    top: @r;
    margin-left: -(@R - @r);
    display: flex;
    justify-content: center;
    animation: rotation @duration infinite ease-in;
    img {
      width: @size;
      height: @size;
      border-radius: 50%;
      position: absolute;
      top: -@r;
      transform-origin: center @r+@R;
      each(range(@n),{
        &:nth-child(@{value}){
          transform: rotate(@rDeg * @value);
        }
       
      })
    }
  }
}

.setAnimation(@i,@max) when(@i <= @max){
  @eP: @eachPercentage * @i;
  @bP:  @eP - @backPercentage;
  @{eP},
  @{bP} {
    transform: rotate(-@rDeg * @i);
  }
  .setAnimation(@i + 1,@max);
}  
@keyframes rotation {
  .setAnimation(1,@n);
}