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

@brickspert 2018-08-20 14:37:12发表于 brickspert/blog

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

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

直接上结果图

drawing

1. 拆解

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

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

2. 单边渐变的圆环

思考下思路:一个盒子,三个边是绿色,一个边是绿色到红色的渐变色,然后用border-radius弯曲成一个圆。

哈哈,这么一想,好简单啊。

but,but,只有单边颜色渐变用css是没法实现的。吐血~,不信你去试试,去查查。

难点就在如何实现单边颜色渐变这里。

follow me~

2.1 三边绿色,一边透明的圆环

这步非常简单

drawing

  <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 渐变块实现

难点就在这里,我们画一个从上到下渐变的方块,放在空白圆环那里。

drawing

<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,盖住多余的部分。外面的通过boxoverflow: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

完整源码在这里,祝你好运!

❤️感谢大家

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

image