css3 圆形进度条-用css3实现方形进度条

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

本文向您介绍用css3实现方形进度条。 主要内容包括其使用实例、应用方法、基础知识点总结和注意事项。 具有一定的参考价值，有需要的同学可以参考。

利用css3的圆角、旋转、剪切属性实现方形进度条。 原理并不难css3 圆形进度条，两把剪切加一旋转。 进度条分为左右两侧。 左边的操作50%以下就可以了，操作50%以上的一侧随意写样式。 代码如下：

html部分：

 

     

    
    

     

    

0%

最外面的div3被切成两半，然后旋转到需要的角度css3 圆形进度条，父级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(){
 var a = 0;
 var b = 0;
 var timer = setInterval(function(){
  a++;
  if(a50&&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);
});