使用css3的圓角、旋轉(zhuǎn)、剪切屬性實現(xiàn)圓形進(jìn)度條，原理不難，兩次剪切加一次旋轉(zhuǎn)。 進(jìn)度條分左右兩邊，50%一下操作右邊的就行，超過50%操作左邊的 樣式隨便寫的，代碼如下：

html部分：

0%

最內(nèi)層的div3裁剪一半然后旋轉(zhuǎn)需要的角度，

父級div2裁剪一半，此時已經(jīng)裁剪出來了那個扇形了

最后在上面加個圓形遮蓋層

css代碼：

.div1,?.right-div2,?.right-div3,?.left-div2,?.left-div3?{?width:200px;?height:200px;?border-radius:50%;}

.div1?{?background:#ccc;?position:relative;}

.right-div2,?.right-div3,?.left-div2,?.left-div3?{?position:absolute;?left:0;?top:0;}

.right-div2,?.right-div3?{?clip:rect(0,auto,auto,100px);}

.left-div2,?.left-div3?{?clip:rect(0,100px,auto,auto);}

.right-div3?{?background:#f00;?transform:rotate(-180deg);}

.left-div3?{?background:#f00;?transform:rotate(-180deg);}

.div4?{?position:absolute;?top:25px;?left:25px;?width:150px;?height:150px;?line-height:150px;?text-align:center;?border-radius:50%;?background:#fff;}

js代碼：

$(function(){

var?a?=?0;

var?b?=?0;

var?timer?=?setInterval(function(){

a++;

if(a<=50){

//-180deg是0%，轉(zhuǎn)換一下

b?=?a*3.6-180;

$('.right-div3').css('transform','rotate('?+?b?+?'deg)');

}else?if(a>50&&a<=100){

//超過50%，需要修改左邊的,右邊0deg是50%

$('.right-div3').css('transform','rotate(0)');

//左邊0deg是100%，轉(zhuǎn)換一下

b?=?a*3.6-360;

$('.left-div3').css('transform','rotate('?+?b?+?'deg)');

}else{

clearInterval(timer);

return;

}

$('.div4?span').html(a);

},200);

});

標(biāo)簽：

代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com

特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！

本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。

總結(jié)

以上是生活随笔為你收集整理的html怎么做进度条圆形,用css3实现圆形进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。