两种CSS3圆环进度条详解

Posted 2020-06-27 卷柏的花期

晚上睡觉之前，我抽了1个多小时，研究了一下圆环进度条，结合从网上查阅的资料，我终于掌握了两种圆环的生成方法。

这次的效果就是单纯的CSS3效果，也没有写具体的JS，等以后有时间在好好整理一下吧~。

 

第一种：通过overflow溢出隐藏的方式：

这种方法好处在于容易理解，只需要一层一层的嵌套，即可得到效果，但是实现起来较为繁琐，html的结构也比较冗余。

先看HTML结构：

    <div class="circle-one">
        <div class="circle-one-l"> 
            <div class="circle-one-l-in"></div>
        </div>
        <div class="circle-one-r">
            <div class="circle-one-r-in"></div>
        </div>
    </div>

 .circle-one-l ：用于控制左侧的显示范围。

 .circle-one-l-in : 用于控制只显示半圆。

 .circle-one-l-in:after : 用于生成一条完整的圆，这里的圆是通过边框线的方式显示出来的，所以对应的宽与高要进行一定的减去。

 circle-one-r ：用于控制右侧的显示范围。

　　... 

在看CSS代码

        .circle-one{width: 200px;height: 200px;position:relative;margin:50px auto;overflow:hidden;}
        .circle-one-l,.circle-one-l-in{width: 100px;height: 200px;position:absolute;left:0px;top:0px;overflow:hidden;}
        .circle-one-l-in{
            transform-origin:100% 50%;
            transform:rotate(-180deg);
            animation:circle_one_l linear 2s  forwards;
        }
        .circle-one-l-in:after{
            content:‘ ‘;
            position:absolute;
            left:0;
            top:0;
            border-radius: 50%;
            border:10px solid #000;
            width: 180px;
            height: 180px;
        }
        .circle-one-r,.circle-one-r-in{width:100px;height:200px;position:absolute;right:0px;top:0px;overflow:hidden;}
        .circle-one-r-in{
            transform:rotate(-180deg);
            transform-origin:0% 50%;
            animation:circle_one_r linear 2s 2s  forwards;}
        .circle-one-r-in:after{
            content:‘ ‘;
            position:absolute;
            left:-100px;
            top:0;
            border-radius: 50%;
            border:10px solid #000;
            width: 180px;
            height: 180px;
        }
        @keyframes circle_one_l{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }
        @keyframes circle_one_r{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }

 

使用overflow溢出隐藏的方式实现的圆环进度效果，其核心实现就是通过overflow分别划分两个显示范围，然后在每个显示范围的内部，再在其子标签 -in 上通过使用overflow，来得到两个半圆，后期，在通过旋转这两个半圆，便得到进度的效果了。

 

第二种：通过使用clip:rect进行裁剪的方法：

这种方法的好处在于节省HTML标签结构，但是clip却不怎么好理解。

clip是一种CSS裁剪属性，只能作用在绝对定位(absolute)的元素上，可以控制元素可显示的范围。

clip有四个属性值，分别是top,right,bottom,left

格式：clip:rect(top,right,bottom,left)

可以形象的将clip:rect理解成一个点，而它的四个值:top,right,bottom,left，根据值的大于小，分别对上、右、下、左四个方向进行扩张或收缩。

*其中如果某个值是显示范围的最大值，可以用auto表示

----------------------------------------------------------------------------

预热说完，下面说正经的

使用clip裁剪方式实现的圆环进度效果，其核心实现就是通过clip裁剪出左右两个半圆，然后对半圆进行旋转，拼接出完整的圆环进度效果：

先看HTML结构：

    <div class="circle-two">
        <div class="circle-two-l"></div>
        <div class="circle-two-r"></div>
        <div class="circle-two-mask"></div>
    </div>

 

circle-two-l 这个div是用于控制左边显示区域，因为裁剪区域是： clip:rect(0,100px,auto,0); 

circle-two-l:after 这是一个实心的黑色背景的圆形，但是通过裁剪区域只能显示半圆

circle-two-r 这个div是用于控制右边显示区域，因为裁剪区域是： clip:rect(0,auto,auto,100px) 

circle-two-r:after 这是一个实心的黑色背景的圆形，但是通过裁剪区域只能显示半圆

circle-two-mask 则是遮罩，它与背景色相同。

 

下面看看CSS：

        .circle-two{width: 200px;height: 200px;position:relative;margin:50px auto;}
        .circle-two-l{width: 200px;height: 200px;position:absolute;left:0;top:0;clip:rect(0,100px,auto,0);}
        .circle-two-l:after{
            content:‘ ‘;
            background:#000;
            width:200px;
            height:200px;
            border-radius:50%;
            position:absolute;
            left:0;
            top:0;
            clip:rect(0,100px,auto,0);
            transform:rotate(-180deg);
            animation:circle_two_l linear 2s forwards;
        }
        .circle-two-r{width:200px;height: 200px;position: absolute;left:0;top:0;clip:rect(0,auto,auto,100px);}
        .circle-two-r:after{
            content:‘ ‘;
            background:#000;
            width:200px;
            height:200px;
            border-radius:50%;
            position:absolute;
            left:0;
            top:0;
            clip:rect(0,auto,auto,100px);
            transform:rotate(-180deg);
            animation:circle_two_r linear 2s 2s forwards;
        }
        .circle-two-mask{width: 180px;height: 180px;background:#fff;border-radius:50%;position:absolute;left:50%;top:50%;margin-top:-90px;margin-left:-90px;}

        @keyframes circle_two_l{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }
        @keyframes circle_two_r{
            0%{transform:rotate(-180deg);}
            100%{transform:rotate(0deg);}
        }

因此最终，分别通过控制旋转左右两个半圆，再结合 .circle-two-l ,   .circle-two-r clip控制的显示范围，便实现了进度的增加效果。

-----------------------------------

好了，结束，进被窝睡觉~明天继续奋斗，加油~