码迷，mamicode.com
首页 > Web开发 > 详细

CSS3加载动画

时间：2014-10-20 16:38:56      阅读：319      评论：0      收藏：0      [点我收藏+]

标签：http   io   ar   使用   for   sp   div   on   art   

 

bubuko.com,布布扣图1

 

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

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

 

效果图：

bubuko.com,布布扣  图2

代码：

 

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

 

 

Html代码  bubuko.com,布布扣
  1. <div id=‘loading‘>  
  2.   
  3.                  <div id=‘coloumn1‘ class=‘coloumns‘></div>  
  4.   
  5.                  <div id=‘coloumn2‘ class=‘coloumns‘></div>  
  6.   
  7.                  <div id=‘coloumn3‘ class=‘coloumns‘></div>  
  8.   
  9.                 <div id=‘coloumn4‘ class=‘coloumns‘></div>  
  10.   
  11.                  <div id=‘coloumn5‘ class=‘coloumns‘></div>  
  12.   
  13.                  <div id=‘coloumn6‘ class=‘coloumns‘></div>  
  14.   
  15. </div>  

 

 

Html代码  bubuko.com,布布扣
  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. }  

CSS3加载动画

标签：http   io   ar   使用   for   sp   div   on   art   

原文地址：http://www.cnblogs.com/xiaochao12345/p/4037201.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！