使用CSS3构建Ajax加载动画

通常前端工程师采用 gif 动画图片来表现 Ajax 的加载。但是现在 css3 已经引入了动画属性，我们可以在不采用 gif 动画图片的情况下，采用 css3 达到同样的 Ajax 加载动画效果。那么让我们现在开始来实现想要的效果。

  

重要提示：只支持 Webkit 内核的浏览器（ Safari 和 Chrome ）

示例

HTML

    在这里我们只展示 demo 里第一个 Ajax 载入示例的代码。首先我们需要一个名为“ loading ”的容器，以放置所有的动画元素。然后我们需要为每一列定义一个单独的 div ，并且统一定义一个 class 属性。

  

view plain copy to clipboard print ?

1. 'loading' >  
2.                  'coloumn1'   class = 'coloumns' >

  

•                  'coloumn2'   class = 'coloumns' >  
•                  'coloumn3'   class = 'coloumns' >  
•                  'coloumn4'   class = 'coloumns' >  
•                  'coloumn5'   class = 'coloumns' >  
•                  'coloumn6'   class = 'coloumns' >  
•   

•  

   

    

  用 CSS3 设计动画

    

  下面所有的代码都带有注释。

   

  view plain copy to clipboard print ?

  1. #loading{   
  2.     margin-top:30px;  
  3.     float :left;  
  4.     width:95px;  
  5.     height:32px;  
  6.     background-color:#779ec2;  
  7.     margin-left:30px;  
  8.     /* CSS3圆角边框 */   
  9.     -webkit-border-radius: 5px;  
  10.     -moz-border-radius: 5px;  
  11.     border-radius: 5px;  
  12. }  
  13. .coloumns{  
  14.     background-color:#fff;  
  15.     border:1px solid #fff;  
  16.     float :left;  
  17.     height:30px;  
  18.     margin-left:5px;  
  19.     width:10px;  
  20.     /* 在这儿我们定义一个动画名，随后我们将会实现它 */   
  21.     -webkit-animation-name: animation;  
  22.     /* 动画循环一次的总时间 */   
  23.     -webkit-animation-duration: 3s;  
  24.     /* 动画的循环次数，我们设置为无穷大 */   
  25.     -webkit-animation-iteration-count: infinite;  
  26.     -webkit-animation-direction: linear;  
  27.     /* 最初所有列的透明度都为0 */   
  28.     opacity:0;  
  29.     /* 开始时将它缩放为0.8 */   
  30.     -webkit-transform:scale(0.8);  
  31.     }  
  32. #coloumn1{   
  33.     /* 第一列动画延迟0.3秒 */   
  34.     -webkit-animation-delay: .3s;  
  35.  }  
  36. #coloumn2{   
  37.     /* 第二列动画延迟0.4秒 */   
  38.     -webkit-animation-delay: .4s;  
  39. }  
  40. #coloumn3{   
  41.     /* 第三列动画延迟0.5秒*/   
  42.     -webkit-animation-delay: .5s;  
  43. }  
  44. #coloumn4{   
  45.     /* 第四列动画延迟0.6秒*/   
  46.     -webkit-animation-delay: .6s;  
  47.  }  
  48. #coloumn5{