CSS单边颜色渐变倒计时圆环实现

[brickspert]

CSS单边颜色渐变倒计时圆环实现

工作中需要实现尾部红色警告的一个圆环倒计时，网上搜了一圈，同时满足css，单边颜色渐变，圆形的案例还真没有，光单边颜色渐变的案例都几乎没有。那我自己实现一个吧，不做不知道，一做吓一跳，竟然花了好几个小时才完成，特此记录一下，有缘人拿去。

直接上结果图

1. 拆解

这个进度条可以拆解成两部分

1. 画一个三边绿色，一边渐变的圆环
2. 灰色进度条按进度覆盖在彩色的圆环上面。

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

完整源码在这里，祝你好运！

❤️感谢大家

关注公众号「前端技术砖家」，拉你进交流群，大家一起共同交流和进步。