第一种：通过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控制的显示范围，便实现了进度的增加效果。

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

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

转载于:https://www.cnblogs.com/HCJJ/p/5309102.html

两种CSS3圆环进度条详解相关推荐

[整理] C#调用SQLDMO.DLL时间数据库备份 / 还原。 (香神无涯) // C#实现SQLSERVER2000数据库备份还原的两种方法 (带进度条)...
/// <summary> /// 通过调用MSSQL的SQLDMO.DLL文件来实现备份数据库 /// 1.首先在在项目中引用SQLDMO.DLL文件. /// 2.在引用中的SQLDM ...
微信小程序进度条详解 progress 自定圆形进度条
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,progress用来实现水平进度条效果 1 基本使用 <progress percent="80& ...
oracle有哪两种内存结构,Oracle体系结构详解（物理构造，内存结构和逻辑结构）...
当前位置:我的异常网» 数据库 » Oracle体系结构详解(物理构造,内存结构和逻辑结构 Oracle体系结构详解(物理构造,内存结构和逻辑结构) www.myexceptions.net 网友分 ...
OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解
引言 OpenLayers可以通过代码绘制多种几何形状,也可以通过draw类型的交互组件绘制几何形状,官方实例提供了类如圆.折线.矩形.星形等方法.除此之外,椭圆这种图形其实也是非常常见的几何图形,但 ...
Git恢复之前版本的两种方法reset、revert详解
一.问题描述在利用github实现多人合作程序开发的过程中,我们有时会出现错误提交的情况,此时我们希望能撤销提交操作,让程序回到提交前的样子,本文总结了两种解决方法:回退(reset).反做(rev ...
html 环形进度条,详解利用canvas实现环形进度条的方法
前提:有时候在项目中会有用到进度条的情况,使用css3也可以实现,但是对于性能不好的设备,或者网络不好的情况下,卡顿现象非常明显,避免出现不流畅的尴尬情况,所以记录一下,使用canvas来实现的方法. ...
html进度条实现原理,HTML5 progress进度条详解
HTML5 progress 元素简介 progress是HTML5的一个新元素,表示定义一个进度条,用途很广泛,可以用在文件上传的进度显示,文件下载的进度显示,也可以作为一种loading的加载状态 ...
Spring依赖注入的两种方式（根据实例详解）
1,Set注入 2,构造注入 Set方法注入: 原理:通过类的setter方法完成依赖关系的设置 name属性的取值依setter方法名而定,要求这个类里面这个对应的属性必须有setter方法. ...
Element el-progress 进度条详解
点此查看全部文字教程.视频教程.源代码本文目录 1. 前言 2. 基本用法 3. 调整颜色 4. 自定义文字内容 5. 百分值在内部展示,并调整高度 6. 环形进度条 7. 仪表盘进度条 8. 小结 ...

两种CSS3圆环进度条详解

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

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

两种CSS3圆环进度条详解相关推荐

最新文章

热门文章