css中offset应用动效

 如图所示，圆圈绕着转圈，本来可以用相对定位，但奈何要做成圆圈数量不固定，那就意味位置不能固定，需要计算。还是用offset偏移比较简单。

offset-path：偏移轨迹

用svg算出圆形：path("M ${width}, ${width / 2} m -0, 0 a -${width / 2},-${width / 2} 0 1,0 -${width},0 a ${width / 2},${width / 2} 0 1,0 ${width},0")

width为绕圈的宽度

offset-distance：偏移角度

由于轨迹是个圆圈，紧贴着圆圈偏移，小圆整个模块会旋转，所以需要额外加transform转正

// html
<div class="circle-surround">
    <div v-for="(item, index) in circleList" :key="index" class="circle-item">
        <div class="circle-box">
            <p class="circle-item__number">{{ item.number }}</p>
            <p class="circle-item__name">{{ item.name }}</p>
        </div>
    </div>
</div>

// css
.circle-item{
  width: 7rem;
  height: 7rem;
  position: absolute;
  z-index: 1;
  background-image: radial-gradient(farthest-corner, transparent, transparent, #8BB1FF);;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  &__number{
    color: #FFE454;
    font-size: 1.25rem;
    font-weight: bold;
  }

.circle-surround{
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: surround 20s linear infinite;
}
@keyframes surround{
from{
  transform: rotateZ(0deg);
}
to{
  transform: rotateZ(360deg);
}
}

最重要的开始计算圆圈数量、偏移角度以及需要的转正正度

mounted() {
    this.$nextTick(() => {
      // 外框宽高
      const width = document.getElementsByClassName('circle-frame')[0].offsetWidth - 100 || 600;
      // 循环圆圈个数
      this.circleList.forEach((item, index) => {
        // 偏移角度
        const rotate = 90 + (360 / this.circleList.length * index);
        // 添加圆圈动画
        document.styleSheets[0].insertRule(`
          @-webkit-keyframes ani${index}{ from{ transform:rotateZ(${rotate}deg) } to { transform:rotateZ(${(rotate) - 360}deg) }}
        `, 0);
        document.styleSheets[0].insertRule(`
          @keyframes ani${index}{ from{ transform:rotateZ(${rotate}deg) } to { transform:rotateZ(${(rotate) - 360}deg) }}
        `, 0);
        const circleItem = document.getElementsByClassName('circle-item')[index];
        circleItem.setAttribute('style', `
          animation:ani${index} 20s linear infinite;
          -webkit-animation:ani${index} 20s linear infinite;
          offset-distance:${(100 / this.circleList.length).toFixed(1) * index}%;
          transform: rotateZ(${rotate}deg);
          margin-left: -${width / 2}px;
          margin-top: -${width / 2}px;
          offset-path: path("M ${width}, ${width / 2} m -0, 0 a -${width / 2},-${width / 2} 0 1,0 -${width},0 a ${width / 2},${width / 2} 0 1,0 ${width},0");
        `);
      });
    });
  },