CSS3加载动画_html/css_WEB-ITnose

php中文网

发布时间：2016-06-24 11:55:57

|

1684人浏览过

|

来源于php中文网

原创

 

图1

 

通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大.

选1个例子看看怎么实现的吧:

立即学习“前端免费学习笔记（深入）”；

 

效果图：

  图2

CSS3 SVG粘性气泡加载动画特效

一款CSS3 SVG粘性气泡加载动画特效

下载

代码：

 

使用1个名为'loading'的层装所有加载内容，里面需要有多少条目则添加这么多个div，并且使用相同的class名称'coloumns'， 再为每个动画条添加各自延迟的CSS代码

 

 

Html代码  

1.   
2.   
3.                  
     
4.   
5.                  
     
6.   
7.                  
     
8.   
9.                 
     
10.   
11.                  
      
12.   
13.                  
      
14.   

Html代码  

1.     #loading{  
2.   
3.          margin-top:30px;  
4.   
5.          float:left;  
6.   
7.          width:95px;  
8.   
9.          height:32px;  
10.   
11.            
12.   
13.          margin-left:30px;  
14.   
15.          /* CSS3圆角边框 */  
16.   
17.          -webkit-border-radius: 5px;  
18.   
19.          -moz-border-radius: 5px;  
20.   
21.          border-radius: 5px;  
22. }  
23.   
24. .coloumns{  
25.   
26.            
27.   
28.          border:1px solid #fff;  
29.   
30.          float:left;  
31.   
32.          height:30px;  
33.   
34.          margin-left:5px;  
35.   
36.          width:10px;  
37.   
38.          /* 在这儿我们定义一个动画名，随后我们将会实现它 */  
39.   
40.          -webkit-animation-name: animation;  
41.   
42.          /* 动画循环一次的总时间 */  
43.   
44.          -webkit-animation-duration: 3s;  
45.   
46.          /* 动画的循环次数，我们设置为无穷大 */  
47.   
48.          -webkit-animation-iteration-count: infinite;  
49.   
50.          -webkit-animation-direction: linear;  
51.   
52.          /* 最初所有列的透明度都为0 */  
53.   
54.          opacity:0;  
55.   
56.          /* 开始时将它缩放为0.8 */  
57.   
58.          -webkit-transform:scale(0.8);  
59.   
60.          }  
61.   
62. #coloumn1{  
63.   
64.          /* 第一列动画延迟0.3秒 */  
65.   
66.          -webkit-animation-delay: .3s;  
67.   
68.  }  
69.   
70. #coloumn2{  
71.   
72.          /* 第二列动画延迟0.4秒 */  
73.   
74.          -webkit-animation-delay: .4s;  
75.   
76. }  
77.   
78. #coloumn3{  
79.   
80.          /* 第三列动画延迟0.5秒*/  
81.   
82.          -webkit-animation-delay: .5s;  
83.   
84. }  
85.   
86. #coloumn4{  
87.   
88.          /* 第四列动画延迟0.6秒*/  
89.   
90.          -webkit-animation-delay: .6s;  
91.   
92.  }  
93.   
94. #coloumn5{  
95.   
96.          /* 第四列动画延迟0.7秒*/  
97.   
98.          -webkit-animation-delay: .7s;  
99.   
100. }  
101.   
102. #coloumn6{  
103.   
104.          /* 第四列动画延迟0.8秒*/  
105.   
106.          -webkit-animation-delay: .8s;  
107.   
108. }  
109.   
110. /* 之前我们曾经定义过动画的名称，我们在这儿设置动画的属性 */  
111.   
112. @-webkit-keyframes animation{  
113.   
114.          /* 在动画开始时每一列的透明度都是0 */  
115.   
116.          0%{opacity:0;}  
117.   
118.          /* 在动画中间时每一列的透明度都是1 */  
119.   
120.          50%{opacity:1;}  
121.   
122.          /*在动画结束时每一列的透明度都还原到0 */  
123.   
124.          100%{opacity:0;}  
125.   
126. }