使用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@
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。
如果觉得《html怎么做进度条圆形 用css3实现圆形进度条》对你有帮助,请点赞、收藏,并留下你的观点哦!