CSS3読み込みanimation_html/css_WEB-ITnose

 

图1

 

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

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

 

效果图：

  图2

代码：

 

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

 

 

Html代码  

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

HTML コード

1. #loading{
3. margin-top:30px;  
5. float:left;  
7. 幅:95px;  
9. 高さ:32px;  
13. margin-left:30px;  
15. /* CSS3圆角边框 */
17. -webkit-border-radius: 5px;  
19. -moz-border-radius: 5px;  
21. border-radius: 5px;  
22. }
24. .columns{
28. border:1px solid #fff;  
30. float:left;  
32. 高さ:30px;  
34. margin-left:5px;  
36. 幅:10px;  
38. /* 在这儿我们定义一动画名，随后我们将会实现它 */
40. -webkit-animation-name: animation;  
42. /* アニメーション画循環环一次的总時間 */
44. -webkit-animation-duration: 3s;  
46. /* アニメーション画の循環次数、我们设置は無穷大 */
48. -webkit-animation-iteration-count: infinite;  
50. -webkit-animation-direction: リニア;  
52. /* 最初のすべての列の透明度都：0 */
54. 不透明度:0;  
56. /* 開始時将它缩放は0.8 */
58. -webkit-transform:scale(0.8);  
60. }
62. #coloumn1{
64. /* 第一列アニメーション画延迟0.3秒 */
66. -webkit-animation-delay: .3 秒;  
68. }
70. #coloumn2{
72. /* 第二列アニメーション画延迟0.4秒 */
74. -webkit-アニメーション遅延: .4秒;  
76. }
78. #coloumn3{
80. /* 3 列目のアニメーションは 0.5 秒遅れます*/
82. -webkit-animation-delay:
84. }
86. #column4{
87. 四番目/*4列目のアニメーションは0.6秒遅れます*/

🎜 🎜 🎜 🎜}} 🎜#🎜 🎜 🎜 🎜 🎜 { 0.7 秒*/ 🎜 🎜 🎜 🎜 -webkit-animation-delay: . 7s; 🎜 🎜 🎜 🎜} 🎜 🎜 🎜#coloumn6{ 🎜 🎜 🎜 ~ Webkit-Animation-Dlay: 🎜 🎜}} 🎜 🎜 🎜/*アニメーションの名前を定義しました。の属性を設定しますアニメーションはこちら*/🎜@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@ w w @@ /*アニメーションの最後の各列の透明度は 0 に減ります**/🎜 🎜 🎜 {opcity: 0;} 🎜}}} 🎜 🎜 🎜 🎜}}}} 🎜 🎜 🎜🎜 🎜🎜 🎜 🎜 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜