两种css3圆环进度条详解

卷柏的花期      2022-02-12     211

关键词:

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

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

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

圆环进度条两种实现方式(代码片段)

...是齐口的,终点圆口,并且有一个圆;列举了两种实现方式:第一种纯的CSS实现;原理是叠加和旋转而成。缺点在某些机型上面应为遮罩没有对齐(uniapp半个像素不显示的问题,其他平台没有这问题... 查看详情

css奇技淫巧box-shadow实现圆环进度条(代码片段)

CSS奇技淫巧Box-shadow实现圆环进度条文章目录CSS奇技淫巧Box-shadow实现圆环进度条一、Box-shadow圆环进度条二、效果预览三、原理刨析四、实际应用五、总结六、参考资料💘七、推荐博文🍗一、Box-shadow圆环进度条实现圆环... 查看详情

ios圆环,环形渐变进度条的封装

参考技术Ahttps://github.com/alexgaosun/AGSCircleProgressDemo 查看详情

bootstrap进度条组件详解(代码片段)

Bootstrap进度条组件详解首先需要导入相关bootsrap的组件包:bootstrap.min.css、jquery.min.js、bootstrap.min.js等,这个就不多说了在网页中,进度条的效果并不少见,如:平分系统、加载状态等,进度条组件使用了css3的transition和animation属... 查看详情

微信小程序canvas2d绘制圆环进度条组件

参考技术Ahttps://developers.weixin.qq.com/miniprogram/dev/component/canvas.htmlCanvas2D接口(type="2d"),支持同层渲染的一个圆环进度条。(wx.createCanvasContext已废弃)https://gitee.com/susuhhhhhh/componentshttps://gitee.com/susuhhhhhh/wxmini_demo 查看详情

css奇技淫巧box-shadow实现圆环进度条(代码片段)

CSS奇技淫巧Box-shadow实现圆环进度条文章目录CSS奇技淫巧Box-shadow实现圆环进度条一、Box-shadow圆环进度条二、效果预览三、原理刨析四、实际应用五、总结六、参考资料💘七、推荐博文🍗一、Box-shadow圆环进度条实现圆环... 查看详情

ycprogress自定义百分比进度条(代码片段)

目录介绍1.本库优势亮点2.使用介绍2.1圆环百分比进度条2.2直线百分比进度条2.3仿杀毒类型百分比进度条3.注意要点4.效果展示5.其他介绍1.本库优势亮点圆环百分比进度条简便且小巧,支持设置多种属性。可以设置内圆和外圆的颜... 查看详情

小tip:使用svg寥寥数行实现圆环loading进度效果

二、正文设计师设计了一个图片上传圆环loading进度效果。如下截图:首先,CSS3是可以实现的,以前写过一篇转大饼的文章:“CSS3实现鸡蛋饼饼状图loading等待转转转”。原理跟这个一模一样,两个半区的矩形,然后不同时机巧... 查看详情

android基础知识4-3.7progressbar(进度条)详解

...tyleLarge)如图所示:几乎所有的花样的进度条都主要为这两种类型。 二、常用属性和方法属性名含义style设置进度条的风格max设置该进度条的最大值maxHeight进度Widget最大高miniHeight进度Widget最小高maxWidth进度Widget最大宽minWidth... 查看详情

qt第三方圆形进度条-及其改进

...gressBar 功能封装的还是不错,提供了3种模式,线形、圆环、饼状。使用过程中发现圆环进度条对背景透明支持不够完善,内圆的背景无法实现透明,为了解决此问题,下面对此控件进行了一些修订,实现完整的圆形进度条。... 查看详情

首页2--动态自定义圆形进度条

A.绘制圆环,圆弧,文本//1.画圆环//原点坐标floatcircleX=width/2;floatcircleY=width/2;//半径floatradius=width/2-roundWidth/2;//设置画笔的属性paint.setColor(roundColor);paint.setStrokeWidth(roundWidth);paint.setStyle(Paint.Style. 查看详情

纯css3实现圆形进度条动画

悄悄地,GIF格式的进度条已经越来越少,CSS进度条如雨后春笋般涌现。今天要介绍的这个CSS3进度条,效果和FlymeOS4上的加载动画一样。首先,来看下最终的效果:  查看详情

学习|css3实现进度条加载

进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验。进度条的的实现分为3大部分:1、页面布局,2、进度条动效,3、何时进度条增加。文件目录加载文件顺序<linkrel="stylesheet/less"href="./index.less"><script... 查看详情

css3进度条

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>css3进度条</title><style>.meter{ height:20px; position:relative;margin:60px020px0; backgroun 查看详情

css3彩色进度条加载动画带进度百分比

在线演示       本地下载 查看详情

javascript以及css3进度条

JavaScriptcss3进度条使用css3实现进度条<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>#id1{/*background-color:red;*/border:solid1pxre 查看详情

css3做圆形进度条

...重点讲解这个效果,首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了:.circleprogress{  width:160px;  height:160px;  border:20pxsolidred;  border-radius:50%;}然后... 查看详情

自定义圆环形进度条实现(代码片段)

...装了一个通用组件。先看一下效果图:功能有:圆环的颜色和进度可以自定义;中间文字可以自定义;可以自定义圆环的宽度;可以设置底部文字(文字内容、大小和textSt 查看详情