使用CSS3制作Loading动画

 

通常制作Loading动画都是利用GIF图片来完成的。

 

强大的CSS3其实也可以产生同样的效果。

 

注意：使用了一些对于CSS3的支持度的区别，基于Web-kit的浏览器才能完整的实现效果。（Chrome和Safari）

 

详细地址：http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/

 

 

 

其实主要就是利用了CSS3的动画功能。

 

 

 

 

 

主要分三步：

 

1.声明动画

-webkit-keyframes animation  即在不同的时间段（显示为百分比总时间）设置不同的对象属性

 

 

2.设置动画初始值。

如下列属性：

 

-webkit-animation-name: animation;

-webkit-animation-duration: 3s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: linear;

-webkit-transform:scale(0.8);

 

 

 

3.设置不同元素的动画起始时间

-webkit-animation-delay

 

 

搞定！

 

#loading{ margin-top:30px; float:left; width:95px; height:32px; background-color:#779ec2; margin-left:30px; /* CSS3 Border Radius for rounded corner */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .coloumns{ background-color:#fff; border:1px solid #fff; float:left; height:30px; margin-left:5px; width:10px; /* Here we will define an animation name and then we will animate it later */ -webkit-animation-name: animation; /* total time for animation to complete one cycle */ -webkit-animation-duration: 3s; /* Number of loops for animation cycle we set it infinite */ -webkit-animation-iteration-count: infinite; -webkit-animation-direction: linear; /* Initially the opacity of coloumns is zero */ opacity:0; /* Scale it to 0.8 in starting */ -webkit-transform:scale(0.8); } #coloumn1{ /* Coloumn1 animation delay by .3 seconds */ -webkit-animation-delay: .3s; } #coloumn2{ /* Coloumn2 animation delay by .4 seconds */ -webkit-animation-delay: .4s; } #coloumn3{ /* Coloumn3 animation delay by .5 seconds */ -webkit-animation-delay: .5s; } #coloumn4{ /* Coloumn4 animation delay by .6 seconds */ -webkit-animation-delay: .6s; } #coloumn5{ /* Coloumn5 animation delay by .7 seconds */ -webkit-animation-delay: .7s; } #coloumn6{ /* Coloumn6 animation delay by .8 seconds */ -webkit-animation-delay: .8s; } /* Earlier we have defined animation-name as animation now the animation properties will set here */ @-webkit-keyframes animation{ /* opacity of coloumn will be 0 at beginning of animation */ 0%{opacity:0;} /* opacity of coloumn will be 1 at middle of animation */ 50%{opacity:1;} /* Back to opacity zero when animation completes its cycle */ 100%{opacity:0;} }