以下为css3制作的loading动画。
HTML为：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>css3加载动画</title> 6 <link rel="stylesheet" type="text/css" href="css/loading.css"> 7 <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" /> 8 9 </head> 10 11 <body> 12 13 <div class="load1"> 14 <strong>Loading……</strong> 15 <span></span> 16 </div> 17 18 <div class="load2"> 19 <div class="rect1"></div> 20 <div class="rect2"></div> 21 <div class="rect3"></div> 22 <div class="rect4"></div> 23 <div class="rect5"></div> 24 </div> 25 26 <div class="load3"> 27 </div> 28 29 <div class="load4"> 30 <div class="double-bounce1"></div> 31 <div class="double-bounce2"></div> 32 </div> 33 34 <div class="load5"> 35 <div class="cube1"></div> 36 <div class="cube2"></div> 37 </div> 38 39 <div class="load6"> 40 <div class="cir1"></div> 41 <div class="cir2"></div> 42 </div> 43 44 <div class="load7"> 45 <div class="load7-container container1"> 46 <div class="circle1"></div> 47 <div class="circle2"></div> 48 <div class="circle3"></div> 49 <div class="circle4"></div> 50 </div> 51 <div class="load7-container container2"> 52 <div class="circle1"></div> 53 <div class="circle2"></div> 54 <div class="circle3"></div> 55 <div class="circle4"></div> 56 </div> 57 </div> 58 </body> 59 </html>
css为：
1 @charset "utf-8";
2 /* CSS Document */
3
4 /*box-shadow: h-shadow v-shadow blur spread color inset;*/
5
6 .load1{
7 width:100px;
8 height:100px;
9 -webkit-border-radius: 50px;
10 -moz-border-radius: 50px;
11 border-radius: 50px;
12 position:relative;
13 line-height:100px;
14 background:#000;
15 color:#fff;
16 font-size:12px;
17 -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
18 -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
19 box-shadow: 0 0 5px rgba(0,0,0,0.5);
20 text-align:center;
21 margin:80px auto;
22 }
23
24 /* 利用before添加外围圈 */
25 .load1:before{
26 content: "";
27 position: absolute;
28 /* 上下左右一共出去20px,即为20px的外圈 */
29 left: -20px;
30 top: -20px;
31 bottom: -20px;
32 right: -20px;
33 /* 上下左右一共出去20px,即为20px的外圈 */
34 /* border-radius值超过70px也可 使其呈现为圆形即可 */
35 -webkit-border-radius: 70px;
36 -moz-border-radius: 70px;
37 border-radius: 70px;
38 background:#999;
39 z-index: -2;
40 -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
41 -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
42 box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
43 }
44 /* 制作一个三角形 */
45 .load1 span{
46 position: absolute;
47 width: 0;
48 height: 0;
49 border-left: 50px solid transparent;
50 border-right: 50px solid transparent;
51 border-top: 80px solid rgba(255,255,255,0.5);
52 z-index: -1;
53 top: -20px;
54 left: 0px;
55 -webkit-animation: ticktock 5s linear infinite;
56 -webkit-transform-origin: 50px 80px;
57 -moz-animation: ticktock 5s linear infinite;
58 -moz-transform-origin: 50px 80px;
59
60
61 }
62 .load1 strong{
63 display:block;
64 margin:0 auto;
65 overflow:hidden;
66 -webkit-animation: expand 2.5s linear infinite;
67 -moz-animation: expand 2.5s linear infinite;
68 }
69
70
71 @-webkit-keyframes expand {
72 0% {
73 width: 0;
74 }
75 100% {
76 width: 60px;
77 }
78 }
79 @-moz-keyframes expand {
80 0% {
81 width: 0;
82 }
83 100% {
84 width: 60px;
85 }
86 }
87 /* 旋转指针 */
88 @-webkit-keyframes ticktock {
89 0% {
90 -webkit-transform: rotate(0);
91 }
92 100% {
93 -webkit-transform: rotate(360deg);
94 }
95 }
96 @-moz-keyframes ticktock {
97 0% {
98 -moz-transform: rotate(0);
99 }
100 100% {
101 -moz-transform: rotate(360deg);
102 }
103 }
104
105 /******************************************************************************/
106
107 .load2 { /* 定义容器 */
108 margin: 100px auto;
109 width: 50px;
110 height: 60px;
111 text-align: center;
112 font-size: 10px;
113 }
114
115 .load2 > div {
116 /* 定义竖条样式 */
117 background-color: #67CF22;
118 height: 100%;
119 width: 6px;
120 display: inline-block;
121
122 -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
123 animation: stretchdelay 1.2s infinite ease-in-out;
124 }
125 .load2 .rect1 {/* 允许负值，-1.2s 使动画马上开始，但跳过 1.2 秒进入动画。 动画一共规定为1.2s */
126 -webkit-animation-delay: -1.2s;
127 animation-delay: -1.2s;
128 }
129
130 .load2 .rect2 {
131 -webkit-animation-delay: -1.1s;
132 animation-delay: -1.1s;
133 }
134
135 .load2 .rect3 {
136 -webkit-animation-delay: -1.0s;
137 animation-delay: -1.0s;
138 }
139
140 .load2 .rect4 {
141 -webkit-animation-delay: -0.9s;
142 animation-delay: -0.9s;
143 }
144
145 .load2 .rect5 {
146 -webkit-animation-delay: -0.8s;
147 animation-delay: -0.8s;
148 }
149
150 @-webkit-keyframes stretchdelay {
151 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } /* 高度缩小为原来的0.4倍 */
152 20% { -webkit-transform: scaleY(1.0) } /* 20%时高度为100% */
153 }
154
155 @keyframes stretchdelay {
156 0%, 40%, 100% {
157 transform: scaleY(0.4);
158 -webkit-transform: scaleY(0.4);
159 } 20% {
160 transform: scaleY(1.0);
161 -webkit-transform: scaleY(1.0);
162 }
163 }
164
165 /*********************************************************/
166
167 .load3 { /* 定义外观样式 */
168 width: 60px;
169 height: 60px;
170 background-color: #67CF22;
171
172 margin: 100px auto;
173 -webkit-animation: rotateplane 1.2s infinite ease-in-out;
174 animation: rotateplane 1.2s infinite ease-in-out;
175 }
176
177 @-webkit-keyframes rotateplane {
178 0% { -webkit-transform: perspective(120px) }
179 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
180 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
181 }
182 /* transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。
183 正如您所看到的，当元素设置了flat值时，其子元素不会根据translateZ()值摊开，而在同一平面旋转，如上图上部分所示；当元素设置了preserve-3d值时，其子元素img会根据translateZ()值摊开，不再会堆叠在一起，如上图下部分所示。
184
185 有一点需要特别提醒大家，如果你的元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫死子元素出现在同一平面（和元素设置了transform-style为flat一样的效果）
186
187 其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。
188
189
190 */
191 @keyframes rotateplane {
192 0% {
193 transform: perspective(120px) rotateX(0deg) rotateY(0deg);
194 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
195 } 50% {
196 transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
197 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg)
198 } 100% {
199 transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
200 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
201 }
202 }
203
204 /***********************************************/
205 .load4 {
206 width: 60px;
207 height: 60px;
208
209 position: relative;
210 margin: 100px auto;
211 }
212
213 .double-bounce1, .double-bounce2 {
214 width: 100%;
215 height: 100%;
216 border-radius: 50%;
217 background-color: #67CF22;
218 opacity: 0.6;
219 position: absolute;
220 top: 0;
221 left: 0;
222
223 -webkit-animation: bounce 2.0s infinite ease-in-out;
224 animation: bounce 2.0s infinite ease-in-out;
225 }
226
227 .double-bounce2 {
228 -webkit-animation-delay: -1.0s; /* 立即执行且跳过1秒执行，此处形成两个圆重叠效果 */
229 animation-delay: -1.0s;
230 }
231
232 @-webkit-keyframes bounce { /* 圆由无到有，scale(1.0)为原图像大小 */
233 0%, 100% { -webkit-transform: scale(0.0) }
234 50% { -webkit-transform: scale(1.0) }
235 }
236
237 @keyframes bounce {
238 0%, 100% {
239 transform: scale(0.0);
240 -webkit-transform: scale(0.0);
241 } 50% {
242 transform: scale(1.0);
243 -webkit-transform: scale(1.0);
244 }
245 }
246
247 /********************************************************/
248 .load5{ /* 规定容器 */
249 margin:100px auto;
250 width:32px;
251 height:32px;
252 position:relative;
253
254 }
255 .cube1, .cube2 { /* 规定样式 */
256 background-color: #67CF22;
257 width: 30px;
258 height: 30px;
259 position: absolute;
260 top: 0;
261 left: 0;
262
263 -webkit-animation: cubemove 1.8s infinite ease-in-out;
264 animation: cubemove 1.8s infinite ease-in-out;
265 }
266
267 .cube2 {
268 -webkit-animation-delay: -0.9s;
269 animation-delay: -0.9s;
270 }
271 @-webkit-keyframes cubemove {
272 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
273 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
274 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
275 100% { -webkit-transform: rotate(-360deg) }
276 }
277
278 @keyframes cubemove { /* 在50%的时候顿了一下至50.1%，防止一直旋转造成旋转太快 */
279 25% {
280 transform: translateX(42px) rotate(-90deg) scale(0.5);
281 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
282 } 50% {
283 transform: translateX(42px) translateY(42px) rotate(-179deg);
284 -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
285 } 50.1% {
286 transform: translateX(42px) translateY(42px) rotate(-180deg);
287 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
288 } 75% {
289 transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
290 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
291 } 100% {
292 transform: rotate(-360deg);
293 -webkit-transform: rotate(-360deg);
294 }
295 }
296
297 /***************************************************************/
298 .load6{ /* 对容器也进行动画，形成小圆转圈效果 */
299 margin:100px auto;
300 width:90px;
301 height:90px;
302 position:relative;
303 text-align:center;
304 border:1px solid #000;
305 -webkit-animation:rotate 2.0s infinite linear;
306 animation:rotate 2.0s infinite linear;
307 }
308
309 .cir1, .cir2{
310 width:60%;
311 height:60%;
312 display:inline-block;
313 position:absolute;
314 top:0;
315 left:0;
316 background:#67cf22;
317 border-radius:100%;
318 -webkit-animation:bounce 2.0s infinite linear;
319 animation:bounce 2.0s infinite linear;
320 }
321
322 .cir2{
323 -webkit-animation-delay:-1.0s;
324 animation-delay:-1.0s;
325 position:absolute;
326 bottom:0;
327 top:auto; /* 通过浏览器计算上边位置 */
328 }
329
330
331 @-webkit-keyframes rotate{
332 100%
333 {
334 -webkit-transform:rotate(360deg)
335 }
336
337 }
338
339 @keyframes rotate{
340 100%{
341 transform:rotate(360deg);
342 -webkit-transform:rotate(360deg);
343
344 }
345 }
346
347 @keyframes bounce{
348 0%,100%{
349 transform:scale(0.0);
350 -webkit-transform:scale(0.0);
351
352 }
353 50%{
354 transform:scale(1.0);
355 -webkit-transform:scale(1.0);
356
357 }
358
359 }
灵感来源：http://www.cnblogs.com/lhb25/archive/2013/12/28/loading-spinners-animated-with-css3.html
时间： 2024-10-12 07:24:35