?
?
图1
?
通常我们都使用gif格式的图片或者使用Ajax来实现诸如这类的动态加载条,但是现在CSS3也可以完成,并且灵活性更大.
选1个例子看看怎么实现的吧:
?
效果图：
??图2
代码：
?
使用1个名为'loading'的层装所有加载内容，里面需要有多少条目则添加这么多个div，并且使用相同的class名称'coloumns'， 再为每个动画条添加各自延迟的CSS代码
?
?
<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>
?
?
#loading{
margin-top:30px;
float:left;
width:95px;
height:32px;
background-color:#779ec2;
margin-left:30px;
/* CSS3圆角边框 */
-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;
/* 在这儿我们定义一个动画名，随后我们将会实现它 */
-webkit-animation-name: animation;
/* 动画循环一次的总时间 */
-webkit-animation-duration: 3s;
/* 动画的循环次数，我们设置为无穷大 */
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
/* 最初所有列的透明度都为0 */
opacity:0;
/* 开始时将它缩放为0.8 */
-webkit-transform:scale(0.8);
}
#coloumn1{
/* 第一列动画延迟0.3秒 */
-webkit-animation-delay: .3s;
}
#coloumn2{
/* 第二列动画延迟0.4秒 */
-webkit-animation-delay: .4s;
}
#coloumn3{
/* 第三列动画延迟0.5秒*/
-webkit-animation-delay: .5s;
}
#coloumn4{
/* 第四列动画延迟0.6秒*/
-webkit-animation-delay: .6s;
}
#coloumn5{
/* 第四列动画延迟0.7秒*/
-webkit-animation-delay: .7s;
}
#coloumn6{
/* 第四列动画延迟0.8秒*/
-webkit-animation-delay: .8s;
}
/* 之前我们曾经定义过动画的名称，我们在这儿设置动画的属性 */
@-webkit-keyframes animation{
/* 在动画开始时每一列的透明度都是0 */
0%{opacity:0;}
/* 在动画中间时每一列的透明度都是1 */
50%{opacity:1;}
/*在动画结束时每一列的透明度都还原到0 */
100%{opacity:0;}
}
?
?
?