下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家，也给大家做个参考。
使用css3的圆角、旋转、剪切属性实现圆形进度条，原理不难，两次剪切加一次旋转。 进度条分左右两边，50%一下操作右边的就行，超过50%操作左边的 样式随便写的，代码如下：
<div class="div1"> <div class="right-div2"> <div class="right-div3"></div> </div> <div class="left-div2"> <div class="left-div3"></div> </div> </div> <div class="div4"><span>0</span>%</div>
.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; border-radius:50%;}
.div1 { background:#ccc; position:relative;}
.right-div2, .left-div3 { position:absolute; left:0; top:0;}
.right-div2, .right-div3 { clip:rect(0,auto,100px);}
.left-div2, .left-div3 { clip:rect(0,100px,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;}
$(function(){
var a = 0;
var b = 0;
var timer = setInterval(function(){
a++;
if(a<=50){
//-180deg是0%，转换一下
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%，转换一下
b = a*3.6-360;
$('.left-div3').css('transform','rotate(' + b + 'deg)');
}else{
clearInterval(timer);
return;
}
$('.div4 span').html(a);
},200);
});
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
原文链接：https://www.f2er.com/css/456824.html