Question

如何利用CSS3实现圆形进度条

Answer 1

html部分：
<pre class="brush:html;toolbar: true; auto-links: false;"><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></pre>
最内层的div3裁剪一半然后旋转需要的角度， 父级div2裁剪一半，此时已经裁剪出来了那个扇形了 最后在上面加个圆形遮盖层
css代码：
<pre class="brush:css;toolbar: true; auto-links: false;">.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;}</pre>
js代码：
<pre class="brush:js;toolbar: true; auto-links: false;">$(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); });</pre>