我们要知道，这里主要使用了css3的animation动画属性，首先将进度条设置为一个初始宽度为0，背景色为绿色，高度与容器相同的元素；在通过animation动画属性对其宽度进行过渡，从而实现进度条填充的效果。

 

　　我们来看看css3的animation动画属性的相关知识。

 

　　animation属性是一个简写属性，用于设置六个动画属性：

 

　　animation-name：规定需要绑定到选择器的keyframe名称；

 

　　animation-duration：规定完成动画所花费的时间，以秒或毫秒计；

 

　　animation-timing-function：规定动画的速度曲线；

 

　　animation-delay：规定在动画开始之前的延迟；

 

　　animation-iteration-count：规定动画应该播放的次数；

 

　　animation-direction：规定是否应该轮流反向播放动画

 

　　下面我们来看看具体的实现动态进度条效果的方法。

 

　　css+js实现简单的动态进度条效果的代码示例：

 

　　html代码：

 

　　<!--外层容器-->

 

　　<divid="wrapper">

 

　　<!--进度条容器-->

 

　　<divid="progressbar">

 

　　<!--用来模仿进度条推进效果的进度条元素-->

 

　　<divid="fill"></div>

 

　　</div>

 

　　</div>

 

　　css代码：

 

　　#wrapper{

 

　　position:relative;

 

　　width:200px;

 

　　height:100px;

 

　　border:1pxsoliddarkgray;

 

　　}

 

　　#progressbar{

 

　　position:absolute;

 

　　top:50%;

 

　　left:50%;

 

　　margin-left:-90px;

 

　　margin-top:-10px;

 

　　width:180px;

 

　　height:20px;

 

　　border:1pxsoliddarkgray;

 

　　}

 

　　/*在进度条元素上调用动画*/

 

　　#fill{

 

　　animation:move2s;

 

　　text-align:center;

 

　　background-color:#6caf00;

 

　　}

 

　　/*实现元素宽度的过渡动画效果*/

 

　　@keyframesmove{

 

　　0%{

 

　　width:0;

 

　　}

 

　　100%{

 

　　width:100%;

 

　　}

 

　　}

 

　　js代码：

 

　　varprogressbar={

 

　　init:function(){

 

　　varfill=document.getElementById('fill');

 

　　varcount=0;

 

　　//通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置

 

　　vartimer=setInterval(function(e){

 

　　count++;

 

　　fill.innerHTML=count+'%';

 

　　if(count===100)clearInterval(timer);

 

　　},17);

 

　　}

 

　　};

 

　　progressbar.init();





本文转载自中文网