【html】【17】高级篇--loading加载

参考:　　http://aspx.sc.chinaz.com/query.aspx?keyword=%E5%8A%A0%E8%BD%BD&classID=835

下载: 　 http://sc.chinaz.com/jiaoben/140219222930.htm

html:

 1 <div class="zzsc6">　　　　//样式1
 2   <div class="bounce1"></div>
 3   <div class="bounce2"></div>
 4   <div class="bounce3"></div>
 5 </div>
 6 
 7 <div class="zzsc8">　　　　//样式2
 8   <div class="zzsc8-container container1">
 9     <div class="circle1"></div>
10     <div class="circle2"></div>
11     <div class="circle3"></div>
12     <div class="circle4"></div>
13   </div>
14   <div class="zzsc8-container container2">
15     <div class="circle1"></div>
16     <div class="circle2"></div>
17     <div class="circle3"></div>
18     <div class="circle4"></div>
19   </div>
20   <div class="zzsc8-container container3">
21     <div class="circle1"></div>
22     <div class="circle2"></div>
23     <div class="circle3"></div>
24     <div class="circle4"></div>
25   </div>
26 </div>

css

  1 .zzsc1 {
  2   margin: 100px auto;
  3   width: 50px;
  4   height: 60px;
  5   text-align: center;
  6   font-size: 10px;
  7 }
  8 
  9 .zzsc1 > div {
 10   background-color: #67CF22;
 11   height: 100%;
 12   width: 6px;
 13   display: inline-block;
 14    
 15   -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
 16   animation: stretchdelay 1.2s infinite ease-in-out;
 17 }
 18 
 19 .zzsc1 .rect2 {
 20   -webkit-animation-delay: -1.1s;
 21   animation-delay: -1.1s;
 22 }
 23 
 24 .zzsc1 .rect3 {
 25   -webkit-animation-delay: -1.0s;
 26   animation-delay: -1.0s;
 27 }
 28 
 29 .zzsc1 .rect4 {
 30   -webkit-animation-delay: -0.9s;
 31   animation-delay: -0.9s;
 32 }
 33 
 34 .zzsc1 .rect5 {
 35   -webkit-animation-delay: -0.8s;
 36   animation-delay: -0.8s;
 37 }
 38 
 39 @-webkit-keyframes stretchdelay {
 40   0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
 41   20% { -webkit-transform: scaleY(1.0) }
 42 }
 43 
 44 @keyframes stretchdelay {
 45   0%, 40%, 100% { 
 46     transform: scaleY(0.4);
 47     -webkit-transform: scaleY(0.4);
 48   }  20% { 
 49     transform: scaleY(1.0);
 50     -webkit-transform: scaleY(1.0);
 51   }
 52 }
 53 
 54 .zzsc2 {
 55   width: 60px;
 56   height: 60px;
 57   background-color: #67CF22;
 58 
 59   margin: 100px auto;
 60   -webkit-animation: rotateplane 1.2s infinite ease-in-out;
 61   animation: rotateplane 1.2s infinite ease-in-out;
 62 }
 63 
 64 @-webkit-keyframes rotateplane {
 65   0% { -webkit-transform: perspective(120px) }
 66   50% { -webkit-transform: perspective(120px) rotateY(180deg) }
 67   100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
 68 }
 69 
 70 @keyframes rotateplane {
 71   0% { 
 72     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
 73     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
 74   } 50% { 
 75     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
 76     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
 77   } 100% { 
 78     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 79     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 80   }
 81 }
 82 
 83 .zzsc3 {
 84   width: 60px;
 85   height: 60px;
 86 
 87   position: relative;
 88   margin: 100px auto;
 89 }
 90 
 91 .double-bounce1, .double-bounce2 {
 92   width: 100%;
 93   height: 100%;
 94   border-radius: 50%;
 95   background-color: #67CF22;
 96   opacity: 0.6;
 97   position: absolute;
 98   top: 0;
 99   left: 0;
100    
101   -webkit-animation: bounce 2.0s infinite ease-in-out;
102   animation: bounce 2.0s infinite ease-in-out;
103 }
104 
105 .double-bounce2 {
106   -webkit-animation-delay: -1.0s;
107   animation-delay: -1.0s;
108 }
109 
110 @-webkit-keyframes bounce {
111   0%, 100% { -webkit-transform: scale(0.0) }
112   50% { -webkit-transform: scale(1.0) }
113 }
114 
115 @keyframes bounce {
116   0%, 100% { 
117     transform: scale(0.0);
118     -webkit-transform: scale(0.0);
119   } 50% { 
120     transform: scale(1.0);
121     -webkit-transform: scale(1.0);
122   }
123 }
124 
125 .zzsc4 {
126   margin: 100px auto;
127   width: 32px;
128   height: 32px;
129   position: relative;
130 }
131 
132 .cube1, .cube2 {
133   background-color: #67CF22;
134   width: 30px;
135   height: 30px;
136   position: absolute;
137   top: 0;
138   left: 0;
139    
140   -webkit-animation: cubemove 1.8s infinite ease-in-out;
141   animation: cubemove 1.8s infinite ease-in-out;
142 }
143 
144 .cube2 {
145   -webkit-animation-delay: -0.9s;
146   animation-delay: -0.9s;
147 }
148 
149 @-webkit-keyframes cubemove {
150   25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
151   50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
152   75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
153   100% { -webkit-transform: rotate(-360deg) }
154 }
155 
156 @keyframes cubemove {
157   25% { 
158     transform: translateX(42px) rotate(-90deg) scale(0.5);
159     -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
160   } 50% { 
161     transform: translateX(42px) translateY(42px) rotate(-179deg);
162     -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
163   } 50.1% { 
164     transform: translateX(42px) translateY(42px) rotate(-180deg);
165     -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
166   } 75% { 
167     transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
168     -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
169   } 100% { 
170     transform: rotate(-360deg);
171     /* www.datouwang.com */
172     -webkit-transform: rotate(-360deg);
173   }
174 }
175 
176 .zzsc5 {
177   margin: 100px auto;
178   width: 90px;
179   height: 90px;
180   position: relative;
181   text-align: center;
182    
183   -webkit-animation: rotate 2.0s infinite linear;
184   animation: rotate 2.0s infinite linear;
185 }
186 
187 .dot1, .dot2 {
188   width: 60%;
189   height: 60%;
190   display: inline-block;
191   position: absolute;
192   top: 0;
193   background-color: #67CF22;
194   border-radius: 100%;
195    
196   -webkit-animation: bounce 2.0s infinite ease-in-out;
197   animation: bounce 2.0s infinite ease-in-out;
198 }
199 
200 .dot2 {
201   top: auto;
202   bottom: 0px;
203   -webkit-animation-delay: -1.0s;
204   animation-delay: -1.0s;
205 }
206 
207 @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
208 @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
209 
210 @-webkit-keyframes bounce {
211   0%, 100% { -webkit-transform: scale(0.0) }
212   50% { -webkit-transform: scale(1.0) }
213 }
214 
215 @keyframes bounce {
216   0%, 100% { 
217     transform: scale(0.0);
218     -webkit-transform: scale(0.0);
219   } 50% { 
220     transform: scale(1.0);
221     -webkit-transform: scale(1.0);
222   }
223 }
224 
225 .zzsc6 {
226   margin: 100px auto 0;
227   width: 150px;
228   text-align: center;
229 }
230 
231 .zzsc6 > div {
232   width: 30px;
233   height: 30px;
234   background-color: #67CF22;
235 
236   border-radius: 100%;
237   display: inline-block;
238   -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
239   animation: bouncedelay 1.4s infinite ease-in-out;
240   /* Prevent first frame from flickering when animation starts */
241   -webkit-animation-fill-mode: both;
242   animation-fill-mode: both;
243 }
244 
245 .zzsc6 .bounce1 {
246   -webkit-animation-delay: -0.32s;
247   animation-delay: -0.32s;
248 }
249 
250 .zzsc6 .bounce2 {
251   -webkit-animation-delay: -0.16s;
252   animation-delay: -0.16s;
253 }
254 
255 @-webkit-keyframes bouncedelay {
256   0%, 80%, 100% { -webkit-transform: scale(0.0) }
257   40% { -webkit-transform: scale(1.0) }
258 }
259 
260 @keyframes bouncedelay {
261   0%, 80%, 100% { 
262     transform: scale(0.0);
263     -webkit-transform: scale(0.0);
264   } 40% { 
265     transform: scale(1.0);
266     -webkit-transform: scale(1.0);
267   }
268 }
269 
270 .zzsc7 {
271   width: 40px;
272   height: 40px;
273   margin: 100px auto;
274   background-color: #333;
275 
276   border-radius: 100%;  
277   -webkit-animation: scaleout 1.0s infinite ease-in-out;
278   animation: scaleout 1.0s infinite ease-in-out;
279 }
280 
281 @-webkit-keyframes scaleout {
282   0% { -webkit-transform: scale(0.0) }
283   100% {
284     -webkit-transform: scale(1.0);
285     opacity: 0;
286   }
287 }
288 
289 @keyframes scaleout {
290   0% { 
291     transform: scale(0.0);
292     -webkit-transform: scale(0.0);
293   } 100% {
294     transform: scale(1.0);
295     -webkit-transform: scale(1.0);
296     opacity: 0;
297   }
298 }
299 
300 .zzsc8 {
301   margin: 100px auto;
302   width: 20px;
303   height: 20px;
304   position: relative;
305 }
306 
307 .container1 > div, .container2 > div, .container3 > div {
308   width: 6px;
309   height: 6px;
310   background-color: #333;
311 
312   border-radius: 100%;
313   position: absolute;
314   -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
315   animation: bouncedelay 1.2s infinite ease-in-out;
316   -webkit-animation-fill-mode: both;
317   animation-fill-mode: both;
318 }
319 
320 .zzsc8 .zzsc8-container {
321   position: absolute;
322   width: 100%;
323   height: 100%;
324 }
325 
326 .container2 {
327   -webkit-transform: rotateZ(45deg);
328   transform: rotateZ(45deg);
329 }
330 
331 .container3 {
332   -webkit-transform: rotateZ(90deg);
333   transform: rotateZ(90deg);
334 }
335 
336 .circle1 { top: 0; left: 0; }
337 .circle2 { top: 0; right: 0; }
338 .circle3 { right: 0; bottom: 0; }
339 .circle4 { left: 0; bottom: 0; }
340 
341 .container2 .circle1 {
342   -webkit-animation-delay: -1.1s;
343   animation-delay: -1.1s;
344 }
345 
346 .container3 .circle1 {
347   -webkit-animation-delay: -1.0s;
348   animation-delay: -1.0s;
349 }
350 
351 .container1 .circle2 {
352   -webkit-animation-delay: -0.9s;
353   animation-delay: -0.9s;
354 }
355 
356 .container2 .circle2 {
357   -webkit-animation-delay: -0.8s;
358   animation-delay: -0.8s;
359 }
360 
361 .container3 .circle2 {
362   -webkit-animation-delay: -0.7s;
363   animation-delay: -0.7s;
364 }
365 
366 .container1 .circle3 {
367   -webkit-animation-delay: -0.6s;
368   animation-delay: -0.6s;
369 }
370 
371 .container2 .circle3 {
372   -webkit-animation-delay: -0.5s;
373   animation-delay: -0.5s;
374 }
375 
376 .container3 .circle3 {
377   -webkit-animation-delay: -0.4s;
378   animation-delay: -0.4s;
379 }
380 
381 .container1 .circle4 {
382   -webkit-animation-delay: -0.3s;
383   animation-delay: -0.3s;
384 }
385 
386 .container2 .circle4 {
387   -webkit-animation-delay: -0.2s;
388   animation-delay: -0.2s;
389 }
390 
391 .container3 .circle4 {
392   -webkit-animation-delay: -0.1s;
393   animation-delay: -0.1s;
394 }
395 
396 @-webkit-keyframes bouncedelay {
397   0%, 80%, 100% { -webkit-transform: scale(0.0) }
398   40% { -webkit-transform: scale(1.0) }
399 }
400 
401 @keyframes bouncedelay {
402   0%, 80%, 100% { 
403     transform: scale(0.0);
404     -webkit-transform: scale(0.0);
405   } 40% { 
406     transform: scale(1.0);
407     -webkit-transform: scale(1.0);
408   }
409 }
View Code

效果:

 

posted @ 2015-12-12 16:56  阿亮的笔记  阅读(361)  评论(0)  编辑  收藏  举报