zoukankan      html  css  js  c++  java
  • 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了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控制的显示范围,便实现了进度的增加效果。

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

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

  • 相关阅读:
    1012 The Best Rank (25 分)(排序)
    1011. World Cup Betting (20)(查找元素)
    1009 Product of Polynomials (25 分)(模拟)
    1008 Elevator (20 分)(数学问题)
    1006 Sign In and Sign Out (25 分)(查找元素)
    1005 Spell It Right (20 分)(字符串处理)
    Kafka Connect 出现ERROR Failed to flush WorkerSourceTask{id=local-file-source-0}, timed out while wait
    flume、kafka、avro组成的消息系统
    Java23种设计模式总结【转载】
    Java编程 思维导图
  • 原文地址:https://www.cnblogs.com/HCJJ/p/5309102.html
Copyright © 2011-2022 走看看