css+js怎么實現簡單的動態進度條效果

這篇文章主要介紹css+js怎么實現簡單的動態進度條效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　我們要知道，這里主要使用了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();

以上是“css+js怎么實現簡單的動態進度條效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！