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; }