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;



         margin-left:30px;

         /* CSS3圆角边框 */

         -webkit-border-radius: 5px;

         -moz-border-radius: 5px;

         border-radius: 5px;
}

.coloumns{



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

}