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

素材图片：

代码：

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