Open brickspert opened 5 years ago
工作中需要实现尾部红色警告的一个圆环倒计时,网上搜了一圈,同时满足css,单边颜色渐变,圆形的案例还真没有,光单边颜色渐变的案例都几乎没有。那我自己实现一个吧,不做不知道,一做吓一跳,竟然花了好几个小时才完成,特此记录一下,有缘人拿去。
css
单边颜色渐变
圆形
直接上结果图
这个进度条可以拆解成两部分
思考下思路:一个盒子,三个边是绿色,一个边是绿色到红色的渐变色,然后用border-radius弯曲成一个圆。
border-radius
哈哈,这么一想,好简单啊。
but,but,只有单边颜色渐变用css是没法实现的。吐血~,不信你去试试,去查查。
难点就在如何实现单边颜色渐变这里。
follow me~
这步非常简单
<div class='box'> <div class='green-border'></div> </div> <style> *{ box-sizing: border-box; } .box { width: 240px; height: 240px; } .green-border { width: 100%; height: 100%; border-radius: 50%; border: 20px solid #00a853; border-bottom-color: transparent; transform: rotate(45deg); } </style>
难点就在这里,我们画一个从上到下渐变的方块,放在空白圆环那里。
<div class='red-gradients'></div> <style> .box{ position: relative; } .red-gradients { width: 120px; height: 120px; background: linear-gradient(to right, #00a853, #F04134); position: absolute; bottom: 0; left: 0; z-index: 1; } </style>
接下来我们要覆盖多余的内容,圆内放一个div,盖住多余的部分。外面的通过box的overflow:hidden来隐藏。
box
overflow:hidden
<div class='inner-circle'></div> <style> .box{ border-radius: 50%; overflow: hidden; } .inner-circle { width: 200px; height: 200px; border-radius: 50%; position: absolute; z-index: 2; top: 20px; left: 20px; background-color: white; } </style>
大功告成了,真是机智!
接下来我们讲讲如何实现灰色动态进度条。
算了,不写了~网上讲圆环进度条的一大堆,我就不重复讲了,随便找个例子推荐下:https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html
完整源码在这里,祝你好运!
关注公众号「前端技术砖家」,拉你进交流群,大家一起共同交流和进步。
CSS单边颜色渐变倒计时圆环实现
工作中需要实现尾部红色警告的一个圆环倒计时,网上搜了一圈,同时满足
css
,单边颜色渐变
,圆形
的案例还真没有,光单边颜色渐变
的案例都几乎没有。那我自己实现一个吧,不做不知道,一做吓一跳,竟然花了好几个小时才完成,特此记录一下,有缘人拿去。直接上结果图
1. 拆解
这个进度条可以拆解成两部分
2. 单边渐变的圆环
思考下思路:一个盒子,三个边是绿色,一个边是绿色到红色的渐变色,然后用
border-radius
弯曲成一个圆。哈哈,这么一想,好简单啊。
but,but,只有单边颜色渐变用
css
是没法实现的。吐血~,不信你去试试,去查查。难点就在如何实现单边颜色渐变这里。
follow me~
2.1 三边绿色,一边透明的圆环
这步非常简单
2.2 渐变块实现
难点就在这里,我们画一个从上到下渐变的方块,放在空白圆环那里。
2.3 覆盖多余的内容
接下来我们要覆盖多余的内容,圆内放一个div,盖住多余的部分。外面的通过
box
的overflow:hidden
来隐藏。大功告成了,真是机智!
灰色动态进度条
接下来我们讲讲如何实现灰色动态进度条。
算了,不写了~网上讲圆环进度条的一大堆,我就不重复讲了,随便找个例子推荐下:https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html
完整源码在这里,祝你好运!
❤️感谢大家
关注公众号「前端技术砖家」,拉你进交流群,大家一起共同交流和进步。