css3 loading动画练习

浏览数：35 / 时间：2015年06月09日

以下为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     }