CSS实现圆形进度条及conic-gradient学习

一、conic-gradient

　　conic-gradient：圆锥形渐变，它的两个兄弟line-gradient(线性渐变)、radial-gradient(径向渐变)，算是最早认识的渐变属性。

1、特点：圆锥渐变的起始点是图形中心，渐变方向以顺时针方向绕中心旋转实现渐变效果。

2、兼容性：

　　根据 can i use，目前只在chrome 69及以上支持。

　　可以使用polyfill垫片库，解决兼容性问题。垫片库会根据css语法，生成对应的圆锥渐变图案，并且转化为 base64 代码。

// 需加入的js库
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="//leaverou.github.io/conic-gradient/conic-gradient.js"></script>

　　实测，不能解决兼容性问题

3、案例

<section class="color1"></section>
<section class="color2"></section>

    /* 起始处与结尾处衔接不够自然 */ .color1 { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red, orange, yellow, green, teal, blue, purple) } /* 起始处与结尾处衔接不够自然，解决：在结尾加入开始的颜色 */ .color2 { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(red, orange, yellow, green, teal, blue, purple, red); }

    <section class="pie"></section> .pie { width: 200px; height: 200px; border-radius: 50%; /* 百分比 写法一 */ background: conic-gradient(pink 0, pink 30%, yellow 30%, yellow 70%, lime 70%, lime 100%); /* 写法二 不支持 chrome69 */
      /* background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%); */ }

二、圆形进度条

 

具体实现步骤：

1、先画一个大圆，底色为#ffffff;

<div class="third"> </div> .third{ background-color: #FFFFFF; width: 182px; height: 182px; border-radius: 50%; position: relative; }

2、再画2个半圆：一个浅绿色的半圆和一个白色的半圆

<div class="third">
    <div class="second"></div>
    <div class="first"></div>
</div> .second{ background-color: #6ED4BF; width: 182px; height: 182px; border-radius: 50%; clip:rect(0,91px,auto,0); position: absolute; } .first{ background-color: #FFFFFF; width: 182px; height: 182px; border-radius: 50%; clip:rect(0,auto,auto,91px)； }

3、将second圆根据百分比旋转

.second{ background-color: #6ED4BF; width: 182px; height: 182px; border-radius: 50%; clip:rect(0,91px,auto,0); position: absolute; transform: rotate(30deg); //旋转30度
}

4、最后再画一个小圆，写上百分比

<div class="third">
          <div class="second"></div>
          <div class="first"></div>
          <div class="mask">
               <span>68%</span>
          </div>
</div> .third *{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .mask>span{ display: block; font-size: 44px; color: white; line-height: 150px; }