CSS单边颜色渐变倒计时圆环实现
brickspert opened this issue · comments
CSS单边颜色渐变倒计时圆环实现
工作中需要实现尾部红色警告的一个圆环倒计时,网上搜了一圈,同时满足css
,单边颜色渐变
,圆形
的案例还真没有,光单边颜色渐变
的案例都几乎没有。那我自己实现一个吧,不做不知道,一做吓一跳,竟然花了好几个小时才完成,特此记录一下,有缘人拿去。
直接上结果图
1. 拆解
这个进度条可以拆解成两部分
- 画一个三边绿色,一边渐变的圆环
- 灰色进度条按进度覆盖在彩色的圆环上面。
2. 单边渐变的圆环
思考下思路:一个盒子,三个边是绿色,一个边是绿色到红色的渐变色,然后用border-radius
弯曲成一个圆。
哈哈,这么一想,好简单啊。
but,but,只有单边颜色渐变用css
是没法实现的。吐血~,不信你去试试,去查查。
难点就在如何实现单边颜色渐变这里。
follow me~
2.1 三边绿色,一边透明的圆环
这步非常简单
<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>
2.2 渐变块实现
难点就在这里,我们画一个从上到下渐变的方块,放在空白圆环那里。
<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>
2.3 覆盖多余的内容
接下来我们要覆盖多余的内容,圆内放一个div,盖住多余的部分。外面的通过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
完整源码在这里,祝你好运!
❤️感谢大家
关注公众号「前端技术砖家」,拉你进交流群,大家一起共同交流和进步。