动画沿椭圆路线进行旋转

效果如下：

旋转

推荐一篇写的很好博客

css3 animation沿椭圆轨道旋转运动_liu__software的博客-CSDN博客_css3椭圆轨迹转动

1.animaiton移动x,y实现 

关于球状旋转

第一反应是利用css的animation实现，但是他的活动轨迹是不好控制的，间距，都需要配合贝塞尔曲线完成

如下:

<template>
  <div class="home">
  
    <div class="container">
      <div class="animate">
        <div class="ball" v-for="(item, index) in 16" :class="'ball' + (index + 1)" :key="index">
          <p>{{index + 1}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

 
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
 
  .animate {
    width: 420px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 20px;
    .ball {
        width: 100px;
        height: 100px;
        position: absolute;
        display:flex;
        flex-direction: column;
        align-items:center;
        justify-content:center;
        font-size: 12px;
        P {
            font-size: 24px;
        }
    }
    .ball img:hover{
        transform: scale(1.2);
    }
    .ball img{
        width: 70px;
        height: 70px;
        margin-bottom: 10px;
    }
  }
    .ball1 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }
     .ball2 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -6.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate;
    }
    .ball3 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -7.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    }
     .ball4 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -8.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
    }
     .ball5 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
    }
     .ball6{
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -10.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate;
    }
     .ball7 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -11.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
    }
     .ball8 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -12.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -7s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -7s infinite alternate;
    }
     .ball9 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -13.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
    }
     .ball10 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -14.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
    }
     .ball11 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -15.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
    }
     .ball12 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -16.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -11s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -11s infinite alternate;
    }
     .ball13 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -17.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
    }
    .ball14 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -18.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -13s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -13s infinite alternate;
    }
    .ball15 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -19.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
    }
    .ball16 {
      animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -20.6s infinite alternate,
                   animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
                   scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
    }
  @keyframes animX {
    0% {  left: 0px;}
    100% { left: 640px;}
  }
  @keyframes animY {
    0% { top: 0px;}
    100% { top: 120px;}
  }
  @keyframes scale {
    0% {  transform: scale(0.7) }
    50% {  transform: scale(1.2) }
    100% { transform: scale(0.7) }
  }
}
</style>

推荐的博客还用其他的方式实现，可以借鉴

2.利用序列帧实现旋转

利用序列帧实现动画是一个前端常见的实现动画方式

如何用序列帧完成动画？ui切图，切n张图片，前端进行定义animaiton进行

<template>
  <div class="revolve-box" id="revolve-box" :class="{'toStartMove':start}">
  </div>
</template>


<style lang="scss" scoped>
@keyframes changeBg {
 0.00% {background: url('/static/rotate/序列_00000.png');} 0.34% {background: url('/static/rotate/序列_00001.png');} 0.67% {background: url('/static/rotate/序列_00002.png');} 1.01% {background: url('/static/rotate/序列_00003.png');} 1.35% {background: url('/static/rotate/序列_00004.png');} 1.68% {background: url('/static/rotate/序列_00005.png');} 2.02% {background: url('/static/rotate/序列_00006.png');} 2.36% {background: url('/static/rotate/序列_00007.png');} 2.69% {background: url('/static/rotate/序列_00008.png');} 3.03% {background: url('/static/rotate/序列_00009.png');} 3.37% {background: url('/static/rotate/序列_00010.png');} 3.70% {background: url('/static/rotate/序列_00011.png');} 4.04% {background: url('/static/rotate/序列_00012.png');} 4.38% {background: url('/static/rotate/序列_00013.png');} 4.71% {background: url('/static/rotate/序列_00014.png');} 5.05% {background: url('/static/rotate/序列_00015.png');} 5.39% {background: url('/static/rotate/序列_00016.png');} 5.72% {background: url('/static/rotate/序列_00017.png');} 6.06% {background: url('/static/rotate/序列_00018.png');} 6.40% {background: url('/static/rotate/序列_00019.png');} 6.73% {background: url('/static/rotate/序列_00020.png');} 7.07% {background: url('/static/rotate/序列_00021.png');} 7.41% {background: url('/static/rotate/序列_00022.png');} 7.74% {background: url('/static/rotate/序列_00023.png');} 8.08% {background: url('/static/rotate/序列_00024.png');} 8.42% {background: url('/static/rotate/序列_00025.png');} 8.75% {background: url('/static/rotate/序列_00026.png');} 9.09% {background: url('/static/rotate/序列_00027.png');} 9.43% {background: url('/static/rotate/序列_00028.png');} 9.76% {background: url('/static/rotate/序列_00029.png');} 10.10% {background: url('/static/rotate/序列_00030.png');} 10.44% {background: url('/static/rotate/序列_00031.png');} 10.77% {background: url('/static/rotate/序列_00032.png');} 11.11% {background: url('/static/rotate/序列_00033.png');} 11.45% {background: url('/static/rotate/序列_00034.png');} 11.78% {background: url('/static/rotate/序列_00035.png');} 12.12% {background: url('/static/rotate/序列_00036.png');} 12.46% {background: url('/static/rotate/序列_00037.png');} 12.79% {background: url('/static/rotate/序列_00038.png');} 13.13% {background: url('/static/rotate/序列_00039.png');} 13.47% {background: url('/static/rotate/序列_00040.png');} 13.80% {background: url('/static/rotate/序列_00041.png');} 14.14% {background: url('/static/rotate/序列_00042.png');} 14.48% {background: url('/static/rotate/序列_00043.png');} 14.81% {background: url('/static/rotate/序列_00044.png');} 15.15% {background: url('/static/rotate/序列_00045.png');} 15.49% {background: url('/static/rotate/序列_00046.png');} 15.82% {background: url('/static/rotate/序列_00047.png');} 16.16% {background: url('/static/rotate/序列_00048.png');} 16.50% {background: url('/static/rotate/序列_00049.png');} 16.83% {background: url('/static/rotate/序列_00050.png');} 17.17% {background: url('/static/rotate/序列_00051.png');} 17.51% {background: url('/static/rotate/序列_00052.png');} 17.84% {background: url('/static/rotate/序列_00053.png');} 18.18% {background: url('/static/rotate/序列_00054.png');} 18.52% {background: url('/static/rotate/序列_00055.png');} 18.85% {background: url('/static/rotate/序列_00056.png');} 19.19% {background: url('/static/rotate/序列_00057.png');} 19.53% {background: url('/static/rotate/序列_00058.png');} 19.86% {background: url('/static/rotate/序列_00059.png');} 20.20% {background: url('/static/rotate/序列_00060.png');} 20.54% {background: url('/static/rotate/序列_00061.png');} 20.87% {background: url('/static/rotate/序列_00062.png');} 21.21% {background: url('/static/rotate/序列_00063.png');} 21.55% {background: url('/static/rotate/序列_00064.png');} 21.88% {background: url('/static/rotate/序列_00065.png');} 22.22% {background: url('/static/rotate/序列_00066.png');} 22.56% {background: url('/static/rotate/序列_00067.png');} 22.89% {background: url('/static/rotate/序列_00068.png');} 23.23% {background: url('/static/rotate/序列_00069.png');} 23.57% {background: url('/static/rotate/序列_00070.png');} 23.90% {background: url('/static/rotate/序列_00071.png');} 24.24% {background: url('/static/rotate/序列_00072.png');} 24.58% {background: url('/static/rotate/序列_00073.png');} 24.91% {background: url('/static/rotate/序列_00074.png');} 25.25% {background: url('/static/rotate/序列_00075.png');} 25.59% {background: url('/static/rotate/序列_00076.png');} 25.92% {background: url('/static/rotate/序列_00077.png');} 26.26% {background: url('/static/rotate/序列_00078.png');} 26.60% {background: url('/static/rotate/序列_00079.png');} 26.93% {background: url('/static/rotate/序列_00080.png');} 27.27% {background: url('/static/rotate/序列_00081.png');} 27.61% {background: url('/static/rotate/序列_00082.png');} 27.94% {background: url('/static/rotate/序列_00083.png');} 28.28% {background: url('/static/rotate/序列_00084.png');} 28.62% {background: url('/static/rotate/序列_00085.png');} 28.95% {background: url('/static/rotate/序列_00086.png');} 29.29% {background: url('/static/rotate/序列_00087.png');} 29.63% {background: url('/static/rotate/序列_00088.png');} 29.96% {background: url('/static/rotate/序列_00089.png');} 30.30% {background: url('/static/rotate/序列_00090.png');} 30.64% {background: url('/static/rotate/序列_00091.png');} 30.97% {background: url('/static/rotate/序列_00092.png');} 31.31% {background: url('/static/rotate/序列_00093.png');} 31.65% {background: url('/static/rotate/序列_00094.png');} 31.98% {background: url('/static/rotate/序列_00095.png');} 32.32% {background: url('/static/rotate/序列_00096.png');} 32.66% {background: url('/static/rotate/序列_00097.png');} 32.99% {background: url('/static/rotate/序列_00098.png');} 33.33% {background: url('/static/rotate/序列_00099.png');} 33.67% {background: url('/static/rotate/序列_00101.png');} 34.00% {background: url('/static/rotate/序列_00102.png');} 34.34% {background: url('/static/rotate/序列_00103.png');} 34.68% {background: url('/static/rotate/序列_00104.png');} 35.01% {background: url('/static/rotate/序列_00105.png');} 35.35% {background: url('/static/rotate/序列_00106.png');} 35.69% {background: url('/static/rotate/序列_00107.png');} 36.02% {background: url('/static/rotate/序列_00108.png');} 36.36% {background: url('/static/rotate/序列_00109.png');} 36.70% {background: url('/static/rotate/序列_00110.png');} 37.03% {background: url('/static/rotate/序列_00111.png');} 37.37% {background: url('/static/rotate/序列_00112.png');} 37.71% {background: url('/static/rotate/序列_00113.png');} 38.04% {background: url('/static/rotate/序列_00114.png');} 38.38% {background: url('/static/rotate/序列_00115.png');} 38.72% {background: url('/static/rotate/序列_00116.png');} 39.05% {background: url('/static/rotate/序列_00117.png');} 39.39% {background: url('/static/rotate/序列_00118.png');} 39.73% {background: url('/static/rotate/序列_00119.png');} 40.06% {background: url('/static/rotate/序列_00120.png');} 40.40% {background: url('/static/rotate/序列_00121.png');} 40.74% {background: url('/static/rotate/序列_00122.png');} 41.07% {background: url('/static/rotate/序列_00123.png');} 41.41% {background: url('/static/rotate/序列_00124.png');} 41.75% {background: url('/static/rotate/序列_00125.png');} 42.08% {background: url('/static/rotate/序列_00126.png');} 42.42% {background: url('/static/rotate/序列_00127.png');} 42.76% {background: url('/static/rotate/序列_00128.png');} 43.09% {background: url('/static/rotate/序列_00129.png');} 43.43% {background: url('/static/rotate/序列_00130.png');} 43.77% {background: url('/static/rotate/序列_00131.png');} 44.10% {background: url('/static/rotate/序列_00132.png');} 44.44% {background: url('/static/rotate/序列_00133.png');} 44.78% {background: url('/static/rotate/序列_00134.png');} 45.11% {background: url('/static/rotate/序列_00135.png');} 45.45% {background: url('/static/rotate/序列_00136.png');} 45.79% {background: url('/static/rotate/序列_00137.png');} 46.12% {background: url('/static/rotate/序列_00138.png');} 46.46% {background: url('/static/rotate/序列_00139.png');} 46.80% {background: url('/static/rotate/序列_00140.png');} 47.13% {background: url('/static/rotate/序列_00141.png');} 47.47% {background: url('/static/rotate/序列_00142.png');} 47.81% {background: url('/static/rotate/序列_00143.png');} 48.14% {background: url('/static/rotate/序列_00144.png');} 48.48% {background: url('/static/rotate/序列_00145.png');} 48.82% {background: url('/static/rotate/序列_00146.png');} 49.15% {background: url('/static/rotate/序列_00147.png');} 49.49% {background: url('/static/rotate/序列_00148.png');} 49.83% {background: url('/static/rotate/序列_00149.png');} 50.16% {background: url('/static/rotate/序列_00150.png');} 50.50% {background: url('/static/rotate/序列_00151.png');} 50.84% {background: url('/static/rotate/序列_00152.png');} 51.17% {background: url('/static/rotate/序列_00153.png');} 51.51% {background: url('/static/rotate/序列_00154.png');} 51.85% {background: url('/static/rotate/序列_00155.png');} 52.18% {background: url('/static/rotate/序列_00156.png');} 52.52% {background: url('/static/rotate/序列_00157.png');} 52.86% {background: url('/static/rotate/序列_00158.png');} 53.19% {background: url('/static/rotate/序列_00159.png');} 53.53% {background: url('/static/rotate/序列_00160.png');} 53.87% {background: url('/static/rotate/序列_00161.png');} 54.20% {background: url('/static/rotate/序列_00162.png');} 54.54% {background: url('/static/rotate/序列_00163.png');} 54.88% {background: url('/static/rotate/序列_00164.png');} 55.21% {background: url('/static/rotate/序列_00165.png');} 55.55% {background: url('/static/rotate/序列_00166.png');} 55.89% {background: url('/static/rotate/序列_00167.png');} 56.22% {background: url('/static/rotate/序列_00168.png');} 56.56% {background: url('/static/rotate/序列_00169.png');} 56.90% {background: url('/static/rotate/序列_00170.png');} 57.23% {background: url('/static/rotate/序列_00171.png');} 57.57% {background: url('/static/rotate/序列_00172.png');} 57.91% {background: url('/static/rotate/序列_00173.png');} 58.24% {background: url('/static/rotate/序列_00174.png');} 58.58% {background: url('/static/rotate/序列_00175.png');} 58.92% {background: url('/static/rotate/序列_00176.png');} 59.25% {background: url('/static/rotate/序列_00177.png');} 59.59% {background: url('/static/rotate/序列_00178.png');} 59.93% {background: url('/static/rotate/序列_00179.png');} 60.26% {background: url('/static/rotate/序列_00180.png');} 60.60% {background: url('/static/rotate/序列_00181.png');} 60.94% {background: url('/static/rotate/序列_00182.png');} 61.27% {background: url('/static/rotate/序列_00183.png');} 61.61% {background: url('/static/rotate/序列_00184.png');} 61.95% {background: url('/static/rotate/序列_00185.png');} 62.28% {background: url('/static/rotate/序列_00186.png');} 62.62% {background: url('/static/rotate/序列_00187.png');} 62.96% {background: url('/static/rotate/序列_00188.png');} 63.29% {background: url('/static/rotate/序列_00189.png');} 63.63% {background: url('/static/rotate/序列_00190.png');} 63.97% {background: url('/static/rotate/序列_00191.png');} 64.30% {background: url('/static/rotate/序列_00192.png');} 64.64% {background: url('/static/rotate/序列_00193.png');} 64.98% {background: url('/static/rotate/序列_00194.png');} 65.31% {background: url('/static/rotate/序列_00195.png');} 65.65% {background: url('/static/rotate/序列_00196.png');} 65.99% {background: url('/static/rotate/序列_00197.png');} 66.32% {background: url('/static/rotate/序列_00198.png');} 66.66% {background: url('/static/rotate/序列_00199.png');} 67.00% {background: url('/static/rotate/序列_00200.png');} 67.33% {background: url('/static/rotate/序列_00201.png');} 67.67% {background: url('/static/rotate/序列_00202.png');} 68.01% {background: url('/static/rotate/序列_00203.png');} 68.34% {background: url('/static/rotate/序列_00204.png');} 68.68% {background: url('/static/rotate/序列_00205.png');} 69.02% {background: url('/static/rotate/序列_00206.png');} 69.35% {background: url('/static/rotate/序列_00207.png');} 69.69% {background: url('/static/rotate/序列_00208.png');} 70.03% {background: url('/static/rotate/序列_00209.png');} 70.36% {background: url('/static/rotate/序列_00210.png');} 70.70% {background: url('/static/rotate/序列_00211.png');} 71.04% {background: url('/static/rotate/序列_00212.png');} 71.37% {background: url('/static/rotate/序列_00213.png');} 71.71% {background: url('/static/rotate/序列_00214.png');} 72.05% {background: url('/static/rotate/序列_00215.png');} 72.38% {background: url('/static/rotate/序列_00216.png');} 72.72% {background: url('/static/rotate/序列_00217.png');} 73.06% {background: url('/static/rotate/序列_00218.png');} 73.39% {background: url('/static/rotate/序列_00219.png');} 73.73% {background: url('/static/rotate/序列_00220.png');} 74.07% {background: url('/static/rotate/序列_00221.png');} 74.40% {background: url('/static/rotate/序列_00222.png');} 74.74% {background: url('/static/rotate/序列_00223.png');} 75.08% {background: url('/static/rotate/序列_00224.png');} 75.41% {background: url('/static/rotate/序列_00225.png');} 75.75% {background: url('/static/rotate/序列_00226.png');} 76.09% {background: url('/static/rotate/序列_00227.png');} 76.42% {background: url('/static/rotate/序列_00228.png');} 76.76% {background: url('/static/rotate/序列_00229.png');} 77.10% {background: url('/static/rotate/序列_00230.png');} 77.43% {background: url('/static/rotate/序列_00231.png');} 77.77% {background: url('/static/rotate/序列_00232.png');} 78.11% {background: url('/static/rotate/序列_00233.png');} 78.44% {background: url('/static/rotate/序列_00234.png');} 78.78% {background: url('/static/rotate/序列_00235.png');} 79.12% {background: url('/static/rotate/序列_00236.png');} 79.45% {background: url('/static/rotate/序列_00237.png');} 79.79% {background: url('/static/rotate/序列_00238.png');} 80.13% {background: url('/static/rotate/序列_00239.png');} 80.46% {background: url('/static/rotate/序列_00240.png');} 80.80% {background: url('/static/rotate/序列_00241.png');} 81.14% {background: url('/static/rotate/序列_00242.png');} 81.47% {background: url('/static/rotate/序列_00243.png');} 81.81% {background: url('/static/rotate/序列_00244.png');} 82.15% {background: url('/static/rotate/序列_00245.png');} 82.48% {background: url('/static/rotate/序列_00246.png');} 82.82% {background: url('/static/rotate/序列_00247.png');} 83.16% {background: url('/static/rotate/序列_00248.png');} 83.49% {background: url('/static/rotate/序列_00249.png');} 83.83% {background: url('/static/rotate/序列_00250.png');} 84.17% {background: url('/static/rotate/序列_00251.png');} 84.50% {background: url('/static/rotate/序列_00252.png');} 84.84% {background: url('/static/rotate/序列_00253.png');} 85.18% {background: url('/static/rotate/序列_00254.png');} 85.51% {background: url('/static/rotate/序列_00255.png');} 85.85% {background: url('/static/rotate/序列_00256.png');} 86.19% {background: url('/static/rotate/序列_00257.png');} 86.52% {background: url('/static/rotate/序列_00258.png');} 86.86% {background: url('/static/rotate/序列_00259.png');} 87.20% {background: url('/static/rotate/序列_00260.png');} 87.53% {background: url('/static/rotate/序列_00261.png');} 87.87% {background: url('/static/rotate/序列_00262.png');} 88.21% {background: url('/static/rotate/序列_00263.png');} 88.54% {background: url('/static/rotate/序列_00264.png');} 88.88% {background: url('/static/rotate/序列_00265.png');} 89.22% {background: url('/static/rotate/序列_00266.png');} 89.55% {background: url('/static/rotate/序列_00267.png');} 89.89% {background: url('/static/rotate/序列_00268.png');} 90.23% {background: url('/static/rotate/序列_00269.png');} 90.56% {background: url('/static/rotate/序列_00270.png');} 90.90% {background: url('/static/rotate/序列_00271.png');} 91.24% {background: url('/static/rotate/序列_00272.png');} 91.57% {background: url('/static/rotate/序列_00273.png');} 91.91% {background: url('/static/rotate/序列_00274.png');} 92.25% {background: url('/static/rotate/序列_00275.png');} 92.58% {background: url('/static/rotate/序列_00276.png');} 92.92% {background: url('/static/rotate/序列_00277.png');} 93.26% {background: url('/static/rotate/序列_00278.png');} 93.59% {background: url('/static/rotate/序列_00279.png');} 93.93% {background: url('/static/rotate/序列_00280.png');} 94.27% {background: url('/static/rotate/序列_00281.png');} 94.60% {background: url('/static/rotate/序列_00282.png');} 94.94% {background: url('/static/rotate/序列_00283.png');} 95.28% {background: url('/static/rotate/序列_00284.png');} 95.61% {background: url('/static/rotate/序列_00285.png');} 95.95% {background: url('/static/rotate/序列_00286.png');} 96.29% {background: url('/static/rotate/序列_00287.png');} 96.62% {background: url('/static/rotate/序列_00288.png');} 96.96% {background: url('/static/rotate/序列_00289.png');} 97.30% {background: url('/static/rotate/序列_00290.png');} 97.63% {background: url('/static/rotate/序列_00291.png');} 97.97% {background: url('/static/rotate/序列_00292.png');} 98.31% {background: url('/static/rotate/序列_00293.png');} 98.64% {background: url('/static/rotate/序列_00294.png');} 98.98% {background: url('/static/rotate/序列_00295.png');} 99.32% {background: url('/static/rotate/序列_00296.png');} 99.65% {background: url('/static/rotate/序列_00297.png');} 99.99% {background: url('/static/rotate/序列_00298.png');} 100% {background: url('/static/rotate/序列_00299.png');}
}


.revolve-box {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  animation: changeBg 16s steps(1) infinite;
}


</style>  

表示除了抖动很完美

序列帧实现动画简单，但是存在一个问题

在动画进行播放的时候，图片同时加载，图片的加载速度慢于旋转速度，在第一个16s会进行抖动

为了解决这个进行图片预加载

第一种利用img+promise

  mounted() {
    this.loadAll();
  },
  methods: {
    loadAll() {
      let imgs = []
  
      for(let i = 0; i < 300; i++) {
        let str = i;
        if(i < 10) {
          str = '00' + i;
        }
        if(i>=10 && i < 100) {
          str = '0' + i
        }
      
        imgs.push(require(`/static/rotate/序列_00${str}.png`))
 
      }
   
    
       let promiseAll = []
  
      for(let i = 0; i < imgs.length; i++) {
         promiseAll[i] = new Promise((resolve, reject) => {
           let imgTag = new Image()
          imgTag.src = imgs[i];
           imgTag.onload = function() {
            resolve(imgTag)
           }
         })
       }

      Promise.all(promiseAll).then(res => {
        this.start = true;
      })

    }
  }

第二种利用背景图片预加载

<template>
  <div class="revolve-box" id="revolve-box" :class="{'toStartMove':start}">
    <ul>
      <li v-for="(item, index) in 300" :id="'bg'+index" :key="index"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      start: false
    }
  },
  mounted() {
    this.loadAll();
  },
  methods: {
    loadAll() {
      let imgs = []
      // let strr ='';
      for(let i = 0; i < 300; i++) {
        let str = i;
        if(i< 10) {
          str = '00' + i;
        }
        if(i>= 10 && i <100) {
          str = '0' + i
        }
    
        document.getElementById('bg'+ i).style.background = `url('/static/rotate/序列_00${str}.png'`
      }

    }
  }
  
}
</script>

注意点：

预加载的路径 - 预加载的图片要加载static下面的图片，如果是加载（assets下面的路径），最后动画还是会去请求static下面的路径，那图片就会没有预加载，依旧会出现抖动情况