Animation rotates along an ellipse

The effect is as follows:

to rotate

Recommend a well-written blog

css3 animation rotates along the elliptical orbit_liu__software's blog-CSDN blog_css3 elliptical orbit rotation

1. Animaiton moves x, y to achieve 

About Spherical Rotation

The first reaction is to use CSS animation to achieve it, but its activity trajectory is not easy to control, and the spacing needs to be completed with Bezier curves.

as follows:

<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>

The recommended blog is also implemented in other ways, which can be used for reference

2. Use sequence frames to achieve rotation

Using sequence frames to realize animation is a common front-end way to realize animation

How to accomplish animation with sequence frames? ui cuts pictures, cuts n pictures, and the front end defines 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>  

Indicates that it is perfect except for the jitter

Sequence frames are simple to implement animation, but there is a problem

When the animation is playing, the picture is loaded at the same time, the loading speed of the picture is slower than the rotation speed , and it will shake in the first 16s

 

In order to solve this, image preloading is performed

The first one uses 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;
      })

    }
  }

The second one uses background image preloading

<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>

important point:

Preloaded path - the preloaded image should load the image under static. If it is loaded (the path under assets), the final animation will still request the path under static, then the image will not be preloaded, and there will still be jitter