CSS3加载动画

图1

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

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

效果图：

图2

代码：

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

1. <divid='loading'>
3. <divid='coloumn1'class='coloumns'></div>
5. <divid='coloumn2'class='coloumns'></div>
7. <divid='coloumn3'class='coloumns'></div>
9. <divid='coloumn4'class='coloumns'></div>
11. <divid='coloumn5'class='coloumns'></div>
13. <divid='coloumn6'class='coloumns'></div>
15. </div>

1. #loading{
3. margin-top:30px;
5. float:left;
7. width:95px;
9. height:32px;
13. margin-left:30px;
15. /*CSS3圆角边框*/
17. -webkit-border-radius:5px;
19. -moz-border-radius:5px;
21. border-radius:5px;
22. }
24. .coloumns{
28. border:1pxsolid#fff;
30. float:left;
32. height:30px;
34. margin-left:5px;
36. width:10px;
38. /*在这儿我们定义一个动画名，随后我们将会实现它*/
40. -webkit-animation-name:animation;
42. /*动画循环一次的总时间*/
44. -webkit-animation-duration:3s;
46. /*动画的循环次数，我们设置为无穷大*/
48. -webkit-animation-iteration-count:infinite;
50. -webkit-animation-direction:linear;
52. /*最初所有列的透明度都为0*/
54. opacity:0;
56. /*开始时将它缩放为0.8*/
58. -webkit-transform:scale(0.8);
60. }
62. #coloumn1{
64. /*第一列动画延迟0.3秒*/
66. -webkit-animation-delay:.3s;
68. }
70. #coloumn2{
72. /*第二列动画延迟0.4秒*/
74. -webkit-animation-delay:.4s;
76. }
78. #coloumn3{
80. /*第三列动画延迟0.5秒*/
82. -webkit-animation-delay:.5s;
84. }
86. #coloumn4{
88. /*第四列动画延迟0.6秒*/
90. -webkit-animation-delay:.6s;
92. }
94. #coloumn5{
96. /*第四列动画延迟0.7秒*/
98. -webkit-animation-delay:.7s;
100. }
102. #coloumn6{
104. /*第四列动画延迟0.8秒*/
106. -webkit-animation-delay:.8s;
108. }
110. /*之前我们曾经定义过动画的名称，我们在这儿设置动画的属性*/
112. @-webkit-keyframesanimation{
114. /*在动画开始时每一列的透明度都是0*/
116. 0%{opacity:0;}
118. /*在动画中间时每一列的透明度都是1*/
120. 50%{opacity:1;}
122. /*在动画结束时每一列的透明度都还原到0*/
124. 100%{opacity:0;}
126. }