• 动画沿椭圆路线进行旋转

    效果如下：

    旋转

    推荐一篇写的很好博客

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

    1.animaiton移动x,y实现 

    关于球状旋转

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

    如下:

    1. <template>
    2.   <div class="home">
    3.   
    4.     <div class="container">
    5.       <div class="animate">
    6.         <div class="ball" v-for="(item, index) in 16" :class="'ball' + (index + 1)" :key="index">
    7.           <p>{{index + 1}}p>
    8.         div>
    9.       div>
    10.     div>
    11.   div>
    12. template>
    13.  
    14.  
    15. <style lang="scss" scoped>
    16. .home {
    17.   width: 100%;
    18.   height: 100vh;
    19.  
    20.   .animate {
    21.     width: 420px;
    22.     height: 300px;
    23.     border-radius: 50%;
    24.     position: absolute;
    25.     left: 10px;
    26.     top: 20px;
    27.     .ball {
    28.         width: 100px;
    29.         height: 100px;
    30.         position: absolute;
    31.         display:flex;
    32.         flex-direction: column;
    33.         align-items:center;
    34.         justify-content:center;
    35.         font-size: 12px;
    36.         P {
    37.             font-size: 24px;
    38.         }
    39.     }
    40.     .ball img:hover{
    41.         transform: scale(1.2);
    42.     }
    43.     .ball img{
    44.         width: 70px;
    45.         height: 70px;
    46.         margin-bottom: 10px;
    47.     }
    48.   }
    49.     .ball1 {
    50.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
    51.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
    52.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    53.     }
    54.      .ball2 {
    55.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -6.6s infinite alternate,
    56.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
    57.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate;
    58.     }
    59.     .ball3 {
    60.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -7.6s infinite alternate,
    61.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
    62.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
    63.     }
    64.      .ball4 {
    65.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -8.6s infinite alternate,
    66.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
    67.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
    68.     }
    69.      .ball5 {
    70.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -9.6s infinite alternate,
    71.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
    72.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
    73.     }
    74.      .ball6{
    75.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -10.6s infinite alternate,
    76.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
    77.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate;
    78.     }
    79.      .ball7 {
    80.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -11.6s infinite alternate,
    81.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
    82.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
    83.     }
    84.      .ball8 {
    85.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -12.6s infinite alternate,
    86.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -7s infinite alternate,
    87.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -7s infinite alternate;
    88.     }
    89.      .ball9 {
    90.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -13.6s infinite alternate,
    91.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
    92.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
    93.     }
    94.      .ball10 {
    95.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -14.6s infinite alternate,
    96.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
    97.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
    98.     }
    99.      .ball11 {
    100.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -15.6s infinite alternate,
    101.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
    102.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
    103.     }
    104.      .ball12 {
    105.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -16.6s infinite alternate,
    106.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -11s infinite alternate,
    107.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -11s infinite alternate;
    108.     }
    109.      .ball13 {
    110.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -17.6s infinite alternate,
    111.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
    112.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
    113.     }
    114.     .ball14 {
    115.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -18.6s infinite alternate,
    116.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -13s infinite alternate,
    117.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -13s infinite alternate;
    118.     }
    119.     .ball15 {
    120.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -19.6s infinite alternate,
    121.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
    122.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
    123.     }
    124.     .ball16 {
    125.       animation: animX 9s  cubic-bezier(0.36, 0, 0.64, 1) -20.6s infinite alternate,
    126.                    animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
    127.                    scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
    128.     }
    129.   @keyframes animX {
    130.     0% {  left: 0px;}
    131.     100% { left: 640px;}
    132.   }
    133.   @keyframes animY {
    134.     0% { top: 0px;}
    135.     100% { top: 120px;}
    136.   }
    137.   @keyframes scale {
    138.     0% {  transform: scale(0.7) }
    139.     50% {  transform: scale(1.2) }
    140.     100% { transform: scale(0.7) }
    141.   }
    142. }
    143. style>

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

    2.利用序列帧实现旋转

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

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

    1. <template>
    2.   <div class="revolve-box" id="revolve-box" :class="{'toStartMove':start}">
    3.   div>
    4. template>
    5.  
    6.  
    7. <style lang="scss" scoped>
    8. @keyframes changeBg {
    9.  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');}
    10. }
    11.  
    12.  
    13. .revolve-box {
    14.   width: 100%;
    15.   height: 100%;
    16.   background-size: 100% 100%;
    17.   animation: changeBg 16s steps(1) infinite;
    18. }
    19.  
    20.  
    21. style>

    表示除了抖动很完美

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

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

     

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

    第一种利用img+promise

    1.   mounted() {
    2.     this.loadAll();
    3.   },
    4.   methods: {
    5.     loadAll() {
    6.       let imgs = []
    7.   
    8.       for(let i = 0; i < 300; i++) {
    9.         let str = i;
    10.         if(i < 10) {
    11.           str = '00' + i;
    12.         }
    13.         if(i>=10 && i < 100) {
    14.           str = '0' + i
    15.         }
    16.       
    17.         imgs.push(require(`/static/rotate/序列_00${str}.png`))
    18.  
    19.       }
    20.    
    21.     
    22.        let promiseAll = []
    23.   
    24.       for(let i = 0; i < imgs.length; i++) {
    25.          promiseAll[i] = new Promise((resolve, reject) => {
    26.            let imgTag = new Image()
    27.           imgTag.src = imgs[i];
    28.            imgTag.onload = function() {
    29.             resolve(imgTag)
    30.            }
    31.          })
    32.        }
    33.  
    34.       Promise.all(promiseAll).then(res => {
    35.         this.start = true;
    36.       })
    37.  
    38.     }
    39.   }

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

    1. <template>
    2.   <div class="revolve-box" id="revolve-box" :class="{'toStartMove':start}">
    3.     <ul>
    4.       <li v-for="(item, index) in 300" :id="'bg'+index" :key="index">li>
    5.     ul>
    6.   div>
    7. template>
    8.  
    9. <script>
    10. export default {
    11.   data() {
    12.     return {
    13.       start: false
    14.     }
    15.   },
    16.   mounted() {
    17.     this.loadAll();
    18.   },
    19.   methods: {
    20.     loadAll() {
    21.       let imgs = []
    22.       // let strr ='';
    23.       for(let i = 0; i < 300; i++) {
    24.         let str = i;
    25.         if(i< 10) {
    26.           str = '00' + i;
    27.         }
    28.         if(i>= 10 && i <100) {
    29.           str = '0' + i
    30.         }
    31.     
    32.         document.getElementById('bg'+ i).style.background = `url('/static/rotate/序列_00${str}.png'`
    33.       }
    34.  
    35.     }
    36.   }
    37.   
    38. }
    39. script>

    注意点：

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

  • 相关阅读:
    深度学习Course5第四周Transformers习题整理
    Jenkins+SonarQube代码审查
    Windows下用x2go远程连接ubuntu服务器遇到的问题
    Tkinter创建菜单窗口
    【深度学习】 Python 和 NumPy 系列教程（廿六）：Matplotlib详解：3、多子图和布局：subplots()函数
    springboot进行微信公众号相关开发：（三）发送模板消息并设置通用回调消息接收接口
    我做了一个 VSCode 插件版的 ChatGPT
    如何用 Prometheus Operator 监控 K8s 集群外服务?
    对程序员来说，技术能力和业务逻辑哪个更重要？
    C++17中std::filesystem::directory_entry的使用
  • 原文地址：https://blog.csdn.net/qq_42625428/article/details/126161677