使用css3的圆角、旋转、剪切属性实现圆形进度条，原理不难，两次剪切加一次旋转。 进度条分左右两边，50%一下操作右边的就行，超过50%操作左边的 样式随便写的，代码如下：
html部分：
0%
最内层的div3裁剪一半然后旋转需要的角度，
父级div2裁剪一半，此时已经裁剪出来了那个扇形了
最后在上面加个圆形遮盖层
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(){
vara=0;
varb=0;
vartimer=setInterval(function(){
a++;
if(a<=50){
//-180deg是0%，转换一下
b=a*3.6-180;
$('.right-div3').css('transform','rotate('+b+'deg)');
}elseif(a>50&&a<=100){
//超过50%，需要修改左边的,右边0deg是50%
$('.right-div3').css('transform','rotate(0)');
//左边0deg是100%，转换一下
b=a*3.6-360;
$('.left-div3').css('transform','rotate('+b+'deg)');
}else{
clearInterval(timer);
return;
}
$('.div4span').html(a);
},200);
});
标签：
代码
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
