css3绘制环形_图解CSS3制作圆环形进度条的方法

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的方法

首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了：.circleprogress{

width: 160px;

height: 160px;

border:20px solid red;

border-radius: 50%;

}

然后就会说，这很简单嘛。但是如果不是完整圆形的呢？想了想：.circleprogress{

width: 160px;

height: 160px;

border:20px solid red;

border-left:20px solid transparent;

border-bottom:20px solid transparent;

border-radius: 50%;

}

然后还是会说，这个也不难啦。可是，如果不是刚好都是45度的倍数呢？

OK，我们先设置一个200x200的方块，然后我们在这里面完成我们的效果：.circleProgress_wrapper{

width: 200px;

height: 200px;

margin: 50px auto;

position: relative;

border:1px solid #ddd;

}

接下来我将在这个容器里再放两个矩形，每个矩形都占一半：

width: 100px;

height: 200px;

position: absolute;

top:0;

overflow: hidden;

}

.rightright{

rightright:0;

}</