?

?

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

}

?

?

?