CSS3加载动画
?
?
图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;}}?
?
?