検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3読み込みanimation_html/css_WEB-ITnose

CSS3読み込みanimation_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:55:571313ブラウズ

 

图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;} 🎜}}} 🎜 🎜 🎜 🎜}}}} 🎜 🎜 🎜🎜 🎜🎜 🎜 🎜 🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：詳細な CSS 属性 (9): z-index_html/css_WEB-ITnose次の記事：詳細な CSS 属性 (9): z-index_html/css_WEB-ITnose

関連記事

続きを見る