精灵图通过css实现较复杂的动画效果

傷城~ 2023-01-13 14:52 237阅读 0赞

素材图片：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70_pic_center]  
代码：

div{ 
    	 background: url("素材图片路径");
    	 animation: twinkleDot 2.80s steps(1) infinite;
    }
    @keyframes twinkleDot { 
          0% {  background-position: 0px 0px; }
          1.45% {  background-position: -200px 0px; }
          2.90% {  background-position: -400px 0px; }
          4.35% {  background-position: -600px 0px; }
          5.80% {  background-position: -800px 0px; }
          7.25% {  background-position: -1000px 0px; }
          8.70% {  background-position: -1200px 0px; }
          10.14% {  background-position: -1400px 0px; }
          11.59% {  background-position: -1600px 0px; }
          13.04% {  background-position: -1800px 0px; }
          14.49% {  background-position: -2000px 0px; }
          15.94% {  background-position: -2200px 0px; }
          17.39% {  background-position: -2400px 0px; }
          18.84% {  background-position: -2600px 0px; }
          20.29% {  background-position: -2800px 0px; }
          21.74% {  background-position: -3000px 0px; }
          23.19% {  background-position: -3200px 0px; }
          24.64% {  background-position: -3400px 0px; }
          26.09% {  background-position: -3600px 0px; }
          27.54% {  background-position: -3800px 0px; }
          28.99% {  background-position: -4000px 0px; }
          30.43% {  background-position: -4200px 0px; }
          31.88% {  background-position: -4400px 0px; }
          33.33% {  background-position: -4600px 0px; }
          34.78% {  background-position: -4800px 0px; }
          36.23% {  background-position: 0px -200px; }
          37.68% {  background-position: -200px -200px; }
          39.13% {  background-position: -400px -200px; }
          40.58% {  background-position: -600px -200px; }
          42.03% {  background-position: -800px -200px; }
          43.48% {  background-position: -1000px -200px; }
          44.93% {  background-position: -1200px -200px; }
          46.38% {  background-position: -1400px -200px; }
          47.83% {  background-position: -1600px -200px; }
          49.28% {  background-position: -1800px -200px; }
          50.72% {  background-position: -2000px -200px; }
          52.17% {  background-position: -2200px -200px; }
          53.62% {  background-position: -2400px -200px; }
          55.07% {  background-position: -2600px -200px; }
          56.52% {  background-position: -2800px -200px; }
          57.97% {  background-position: -3000px -200px; }
          59.42% {  background-position: -3200px -200px; }
          60.87% {  background-position: -3400px -200px; }
          62.32% {  background-position: -3600px -200px; }
          63.77% {  background-position: -3800px -200px; }
          65.22% {  background-position: -4000px -200px; }
          66.67% {  background-position: -4200px -200px; }
          68.12% {  background-position: -4400px -200px; }
          69.57% {  background-position: -4600px -200px; }
          71.01% {  background-position: -4800px -200px; }
          72.46% {  background-position: 0px -400px; }
          73.91% {  background-position: -200px -400px; }
          75.36% {  background-position: -400px -400px; }
          76.81% {  background-position: -600px -400px; }
          78.26% {  background-position: -800px -400px; }
          79.71% {  background-position: -1000px -400px; }
          81.16% {  background-position: -1200px -400px; }
          82.61% {  background-position: -1400px -400px; }
          84.06% {  background-position: -1600px -400px; }
          85.51% {  background-position: -1800px -400px; }
          86.96% {  background-position: -2000px -400px; }
          88.41% {  background-position: -2200px -400px; }
          89.86% {  background-position: -2400px -400px; }
          91.30% {  background-position: -2600px -400px; }
          92.75% {  background-position: -2800px -400px; }
          94.20% {  background-position: -3000px -400px; }
          95.65% {  background-position: -3200px -400px; }
          97.10% {  background-position: -3400px -400px; }
          98.55% {  background-position: -3600px -400px; }
          100.00% {  background-position: -3800px -400px; }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/0dbccd7fe2f54be68585247891c1a452.png