CSS3实现大小不一的粒子旋转加载动画

前端  /  管理员 发布于 7年前   266

先看看效果图，像是气泡在上升：

CSS Code复制内容到剪贴板

1. #load3,     
2. #loader3 {     
3.  font-size: 20px;     
4.  margin: 80px 50px;     
5.  float: left;     
6.  width: 1em;     
7.  height: 1em;     
8.  border-radius: 50%;     
9.  position: relative;     
10.  text-indent: -9999em;     
11.  -webkit-animation: load3 1.3s infinite linear;     
12.  animation: load3 1.3s infinite linear;     
13. }     
14. @-webkit-keyframes load3 {     
15.    0%,     
16.    100% {     
17.      box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,     
18.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
19.                  0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
20.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;     
21.    }     
22.    12.5% {     
23.      box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,     
24.                  3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,     
25.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
26.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
27.    }     
28.    25% {     
29.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,     
30.                   3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,     
31.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
32.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
33.    }     
34.    37.5% {     
35.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
36.                    3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,     
37.                    0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,     
38.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
39.   }     
40.   50% {     
41.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
42.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,     
43.                   0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,     
44.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
45.   }     
46.   62.5% {     
47.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
48.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
49.                   0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,     
50.                   -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;     
51.   }     
52.   75% {     
53.      box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
54.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
55.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     
56.                  -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;     
57.   }     
58.   87.5% {     
59.      box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,     
60.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
61.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     
62.                  -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;     
63.   }     
64. }     
65. @keyframes load3 {     
66.   0%,     
67.   100% {     
68.       box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00,     
69.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
70.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
71.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00;     
72.   }     
73.   12.5% {     
74.       box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,     
75.                   3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,     
76.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
77.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
78.   }     
79.   25% {     
80.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00,     
81.                   3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,     
82.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
83.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
84.   }     
85.   37.5% {     
86.      box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
87.                  3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,     
88.                  0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,     
89.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
90.    }     
91.    50% {     
92.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
93.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,     
94.                   0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,     
95.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
96.    }     
97.    62.5% {     
98.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
99.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
100.                    0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00,     
101.                    -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00;     
102.   }     
103.   75% {     
104.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
105.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
106.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     
107.                   -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00;     
108.    }     
109.    87.5% {     
110.        box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00,     
111.                    3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
112.                    0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00,     
113.                    -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00;     
114.   }     
115. }     
116.   

以上就是本文的全部内容，希望对大家学习CSS加载动画教程有所帮助。