CSS3实现10种Loading效果

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

第1种效果：

代码如下：

XML/HTML Code复制内容到剪贴板

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

CSS Code复制内容到剪贴板

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:nth-child(4){   
33.             -webkit-animation-delay:0.6s;   
34.         }   
35.         .loading span:nth-child(5){   
36.             -webkit-animation-delay:0.8s;   
37.         }   
38.   

第2种效果：

代码如下：

XML/HTML Code复制内容到剪贴板

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

CSS Code复制内容到剪贴板

1. .loading{   
2.             width: 150px;   
3.             height: 4px;   
4.             border-radius: 2px;   
5.             margin: 0 auto;   
6.             margin-top:100px;   
7.             position: relative;   
8.             background: lightgreen;   
9.             -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;   
10.         }   
11.         .loading span{   
12.             display: inline-block;   
13.             width: 16px;   
14.             height: 16px;   
15.             border-radius: 50%;   
16.             background: lightgreen;   
17.             position: absolute;   
18.             margin-top: -7px;   
19.             margin-left:-8px;   
20.             -webkit-animation: changePosition 1.04s ease-in infinite alternate;   
21.         }   
22.         @-webkit-keyframes changeBgColor{   
23.             0%{   
24.                 background: lightgreen;   
25.             }   
26.             100%{   
27.                 background: lightblue;   
28.             }   
29.         }   
30.         @-webkit-keyframes changePosition{   
31.             0%{   
32.                 background: lightgreen;   
33.             }   
34.             100%{   
35.                 margin-left: 142px;   
36.                 background: lightblue;   
37.             }   
38.         }   
39.   

第3-5种效果：

代码如下：

XML/HTML Code复制内容到剪贴板

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

第3-5种效果的css样式分别为：

CSS Code复制内容到剪贴板

1. .loading{   
2.             width: 150px;   
3.             height: 15px;   
4.             margin: 0 auto;   
5.             position: relative;   
6.             margin-top:100px;   
7.         }   
8.         .loading span{   
9.             position: absolute;   
10.             width: 15px;   
11.             height: 100%;   
12.             border-radius: 50%;   
13.             background: lightgreen;   
14.             -webkit-animation: load 1.04s ease-in infinite alternate;   
15.         }   
16.         @-webkit-keyframes load{   
17.             0%{   
18.                 opacity: 1;   
19.                 -webkit-transform: translate(0px);   
20.             }   
21.             100%{   
22.                 opacity: 0.2;   
23.                 -webkit-transform: translate(150px);   
24.             }   
25.         }   
26.         .loading span:nth-child(1){   
27.             -webkit-animation-delay:0.13s;   
28.         }   
29.         .loading span:nth-child(2){   
30.             -webkit-animation-delay:0.26s;   
31.         }   
32.         .loading span:nth-child(3){   
33.             -webkit-animation-delay:0.39s;   
34.         }   
35.         .loading span:nth-child(4){   
36.             -webkit-animation-delay:0.52s;   
37.         }   
38.         .loading span:nth-child(5){   
39.             -webkit-animation-delay:0.65s;   
40.         }  

第6-8种效果：

代码如下：

XML/HTML Code复制内容到剪贴板

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

第6-8种效果的css样式分别为：

CSS Code复制内容到剪贴板

1. .loading{   
2.             width: 150px;   
3.             height: 15px;   
4.             margin: 0 auto;   
5.             margin-top:100px;   
6.             text-align: center;   
7.         }   
8.         .loading span{   
9.             display: inline-block;   
10.             width: 15px;   
11.             height: 100%;   
12.             margin-right: 5px;   
13.             background: lightgreen;   
14.             -webkit-animation: load 1.04s ease infinite;   
15.         }   
16.         .loading span:last-child{   
17.             margin-right: 0px;    
18.         }   
19.         @-webkit-keyframes load{   
20.             0%{   
21.                 opacity: 1;   
22.             }   
23.             100%{   
24.                 opacity: 0;   
25.             }   
26.         }   
27.         .loading span:nth-child(1){   
28.             -webkit-animation-delay:0.13s;   
29.         }   
30.         .loading span:nth-child(2){   
31.             -webkit-animation-delay:0.26s;   
32.         }   
33.         .loading span:nth-child(3){   
34.             -webkit-animation-delay:0.39s;   
35.         }   
36.         .loading span:nth-child(4){   
37.             -webkit-animation-delay:0.52s;   
38.         }   
39.         .loading span:nth-child(5){   
40.             -webkit-animation-delay:0.65s;   
41.         }  

第9-10种效果：

代码如下：

XML/HTML Code复制内容到剪贴板

1. <div class="loadEffect">  
2.         <span></span>  
3.         <span></span>  
4.         <span></span>  
5.         <span></span>  
6.         <span></span>  
7.         <span></span>  
8.         <span></span>  
9.         <span></span>  
10. </div>  

CSS样式分别为：

CSS Code复制内容到剪贴板

1. .loadEffect{   
2.             width: 100px;   
3.             height: 100px;   
4.             position: relative;   
5.             margin: 0 auto;   
6.             margin-top:100px;   
7.         }   
8.         .loadEffect span{   
9.             display: inline-block;   
10.             width: 16px;   
11.             height: 16px;   
12.             border-radius: 50%;   
13.             background: lightgreen;   
14.             position: absolute;   
15.             -webkit-animation: load 1.04s ease infinite;   
16.         }   
17.         @-webkit-keyframes load{   
18.             0%{   
19.                 opacity: 1;   
20.             }   
21.             100%{   
22.                 opacity: 0.2;   
23.             }   
24.         }   
25.         .loadEffect span:nth-child(1){   
26.             left: 0;   
27.             top: 50%;   
28.             margin-top:-8px;   
29.             -webkit-animation-delay:0.13s;   
30.         }   
31.         .loadEffect span:nth-child(2){   
32.             left: 14px;   
33.             top: 14px;   
34.             -webkit-animation-delay:0.26s;   
35.         }   
36.         .loadEffect span:nth-child(3){   
37.             left: 50%;   
38.             top: 0;   
39.             margin-left: -8px;   
40.             -webkit-animation-delay:0.39s;   
41.         }   
42.         .loadEffect span:nth-child(4){   
43.             top: 14px;   
44.             rightright:14px;   
45.             -webkit-animation-delay:0.52s;   
46.         }   
47.         .loadEffect span:nth-child(5){   
48.             rightright: 0;   
49.             top: 50%;   
50.             margin-top:-8px;   
51.             -webkit-animation-delay:0.65s;   
52.         }   
53.         .loadEffect span:nth-child(6){   
54.             rightright: 14px;   
55.             bottombottom:14px;   
56.             -webkit-animation-delay:0.78s;   
57.         }   
58.         .loadEffect span:nth-child(7){   
59.             bottombottom: 0;   
60.             left: 50%;   
61.             margin-left: -8px;   
62.             -webkit-animation-delay:0.91s;   
63.         }   
64.         .loadEffect span:nth-child(8){   
65.             bottombottom: 14px;   
66.             left: 14px;   
67.             -webkit-animation-delay:1.04s;   
68.         }  

PS：CSS样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

本文链接：http://www.cnblogs.com/jr1993/p/4622039.html