素材图片:
代码:
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; }
}