這篇文章主要介紹css+js怎么實(shí)現(xiàn)簡(jiǎn)單的動(dòng)態(tài)進(jìn)度條效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、友好網(wǎng)站維護(hù)、網(wǎng)站推廣。
我們要知道，這里主要使用了css3的animation動(dòng)畫屬性，首先將進(jìn)度條設(shè)置為一個(gè)初始寬度為0，背景色為綠色，高度與容器相同的元素；在通過animation動(dòng)畫屬性對(duì)其寬度進(jìn)行過渡，從而實(shí)現(xiàn)進(jìn)度條填充的效果。
我們來(lái)看看css3的animation動(dòng)畫屬性的相關(guān)知識(shí)。
animation屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置六個(gè)動(dòng)畫屬性：
animation-name：規(guī)定需要綁定到選擇器的keyframe名稱；
animation-duration：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)；
animation-timing-function：規(guī)定動(dòng)畫的速度曲線；
animation-delay：規(guī)定在動(dòng)畫開始之前的延遲；
animation-iteration-count：規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)；
animation-direction：規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫
下面我們來(lái)看看具體的實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果的方法。
css+js實(shí)現(xiàn)簡(jiǎn)單的動(dòng)態(tài)進(jìn)度條效果的代碼示例：
html代碼：
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;
}
/*在進(jìn)度條元素上調(diào)用動(dòng)畫*/
#fill{
animation:move2s;
text-align:center;
background-color:#6caf00;
}
/*實(shí)現(xiàn)元素寬度的過渡動(dòng)畫效果*/
@keyframesmove{
0%{
width:0;
}
100%{
width:100%;
}
}
js代碼：
varprogressbar={
init:function(){
varfill=document.getElementById('fill');
varcount=0;
//通過間隔定時(shí)器實(shí)現(xiàn)百分比文字效果,通過計(jì)算CSS動(dòng)畫持續(xù)時(shí)間進(jìn)行間隔設(shè)置
vartimer=setInterval(function(e){
count++;
fill.innerHTML=count+'%';
if(count===100)clearInterval(timer);
},17);
}
};
progressbar.init();
以上是“css+js怎么實(shí)現(xiàn)簡(jiǎn)單的動(dòng)態(tài)進(jìn)度條效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
