CSS3加载动画

图1

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

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

效果图：

  图2

代码：

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

1. <div id='loading'>
2. <div id='coloumn1' class='coloumns'></div>
3. <div id='coloumn2' class='coloumns'></div>
4. <div id='coloumn3' class='coloumns'></div>
5. <div id='coloumn4' class='coloumns'></div>
6. <div id='coloumn5' class='coloumns'></div>
7. <div id='coloumn6' class='coloumns'></div>
8. </div>

1. #loading{
2. margin-top:30px;
3. float:left;
4. width:95px;
5. height:32px;
6. margin-left:30px;
7. /* CSS3圆角边框 */
8. -webkit-border-radius: 5px;
9. -moz-border-radius: 5px;
10. border-radius: 5px;
11. }
12. .coloumns{
13. border:1px solid #fff;
14. float:left;
15. height:30px;
16. margin-left:5px;
17. width:10px;
18. /* 在这儿我们定义一个动画名，随后我们将会实现它 */
19. -webkit-animation-name: animation;
20. /* 动画循环一次的总时间 */
21. -webkit-animation-duration: 3s;
22. /* 动画的循环次数，我们设置为无穷大 */
23. -webkit-animation-iteration-count: infinite;
24. -webkit-animation-direction: linear;
25. /* 最初所有列的透明度都为0 */
26. opacity:0;
27. /* 开始时将它缩放为0.8 */
28. -webkit-transform:scale(0.8);
29. }
30. #coloumn1{
31. /* 第一列动画延迟0.3秒 */
32. -webkit-animation-delay: .3s;
33. }
34. #coloumn2{
35. /* 第二列动画延迟0.4秒 */
36. -webkit-animation-delay: .4s;
37. }
38. #coloumn3{
39. /* 第三列动画延迟0.5秒*/
40. -webkit-animation-delay: .5s;
41. }
42. #coloumn4{
43. /* 第四列动画延迟0.6秒*/
44. -webkit-animation-delay: .6s;
45. }
46. #coloumn5{
47. /* 第四列动画延迟0.7秒*/
48. -webkit-animation-delay: .7s;
49. }
50. #coloumn6{
51. /* 第四列动画延迟0.8秒*/
52. -webkit-animation-delay: .8s;
53. }
54. /* 之前我们曾经定义过动画的名称，我们在这儿设置动画的属性 */
55. @-webkit-keyframes animation{
56. /* 在动画开始时每一列的透明度都是0 */
57. 0%{opacity:0;}
58. /* 在动画中间时每一列的透明度都是1 */
59. 50%{opacity:1;}
60. /*在动画结束时每一列的透明度都还原到0 */
61. 100%{opacity:0;}
62. }