使用CSS3 ，创建Ajax加载动画

 

 

通常前端开发者都使用 gif动画格式来显示数据的加载，但是使用CSS3可以达到相同的效果，不需要使用到gif 动画。（但由于基于Webkit，所以只能支持Safari和Chrome浏览器！）

查看示例：http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/

 

示例代码：

HTML

 

<div id='loading'>
		<div id='coloumn1' class='coloumns'></div>
		<div id='coloumn2' class='coloumns'></div>
		<div id='coloumn3' class='coloumns'></div>
                <div id='coloumn4' class='coloumns'></div>
		<div id='coloumn5' class='coloumns'></div>
		<div id='coloumn6' class='coloumns'></div>
</div>

 

 

使用CSS3：

 

 

#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;}

}

 

点击查看更多详情：http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/