晚上睡觉之前,我抽了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控制的显示范围,便实现了进度的增加效果。
-----------------------------------
好了,结束,进被窝睡觉~明天继续奋斗,加油~