CSS3实现10种Loading效果

用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

第1种效果：

代码如下：

1. <div class="loading">  
2.         <span></span>  
3.         <span></span>  
4.         <span></span>  
5.         <span></span>  
6.         <span></span>  
7. </div>  

1. .loading{   
2.             width: 80px;   
3.             height: 40px;   
4.             margin: 0 auto;   
5.             margin-top:100px;   
6.         }   
7.         .loading span{   
8.             display: inline-block;   
9.             width: 8px;   
10.             height: 100%;   
11.             border-radius: 4px;   
12.             background: lightgreen;   
13.             -webkit-animation: load 1s ease infinite;   
14.         }   
15.         @-webkit-keyframes load{   
16.             0%,100%{   
17.                 height: 40px;   
18.                 background: lightgreen;   
19.             }   
20.             50%{   
21.                 height: 70px;   
22.                 margin: -15px 0;   
23.                 background: lightblue;   
24.             }   
25.         }   
26.         .loading span:nth-child(2){   
27.             -webkit-animation-delay:0.2s;   
28.         }   
29.         .loading span:nth-child(3){   
30.             -webkit-animation-delay:0.4s;   
31.         }   
32.         .loading span: