轉載自張旭鑫

一、從SVG實現多彩圓環倒計時效果說起

上周我做了個demo，使用SVG和stroke-dasharray和stroke-dashoffset特性實現了一個彩條圓環倒計時效果，大概長下面這樣子：

原理是使用兩個漸變半圓無縫疊加在一起。

使用SVG實現的優點是兼容性非常好，IE9瀏覽器也是支持的。

不足在于學習成本比較高，相關的SVG代碼要想完整的手寫出來，還是需要不少積累的。

于是我就琢磨有沒有更簡單的方法實現類似的多彩圓環漸變效果，最好純CSS就能搞定。

絞盡腦汁想出了下面三種實現方法，為了盡可能驗證方法的可行性，我把圓環的漸變顏色從3色變成了12色。

下面依次介紹這三種方法。

二、借助CSS3 conic-gradient錐形漸變實現12色漸變圓環

環形帶上的漸變效果，本質上就是一種錐形漸變，因此，我們直接使用，CSS3 conic-gradient錐形漸變實現應該是最簡單最直接的方法。

如下HTML和CSS：

<div class="circle"></div>復制代碼 .circle {width: 300px; height: 300px;background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);border-radius: 50%; }復制代碼

此時的效果如下圖所示：

但是我們需要的效果不是圓餅，而是一個圓環，也就是中間區域需要鏤空。

有一種比較巧妙的做法，就是搞一個跟背景色一樣半徑小一點的圓形餅覆蓋在中間，這樣視覺看上去就是一個圓環，這也是不一個不錯的方法。但是如果我們的背景是一個復雜的圖案，此時，這種方法恐怕就不能適用。

你怎么需要找到一種中間區域是真實鏤空的方法，怎么處理呢？

我們可以借助CSS3遮罩mask屬性來實現，CSS3 mask遮罩除了支持PNG圖片，SVG圖形，其還支持CSS3漸變背景圖。于是，我們只需要使用CSS3徑向漸變radial-gradient語法生成一個中間透明，邊緣實色的圓環即可。

于是有（這里省略了mask屬性的webkit私有前綴）：

.circle {width: 300px; height: 300px;background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);border-radius: 50%;mask: radial-gradient(transparent 110px, #000 110px); }復制代碼

于是我們的12色圓環漸變效果就實現了：

再配合JS設置clip-path剪裁我們的圖形，就可以實現12色的彩虹圓環倒計時效果了。

眼見為實，您可以狠狠地點擊這里：借助CSS3 mask遮罩和conic-gradient實現的多彩圓環demo

優點和不足
這個方法看上去很簡單，很完美，但是卻有個致命的缺陷，那就是兼容性問題！

CSS3錐形漸變conic-gradient目前僅Chrome瀏覽器才支持，并且Chrome瀏覽器還是需要開啟實驗功能選項才能支持！

因此當下此方法基本上沒有在實際項目中應用的可能性，需要看看有沒有什么其他解決方案？

三、借助CSS3 linear-gradient線性漸變近似實現12色漸變圓環

雖然錐形漸變瀏覽器的兼容性不怎么樣，但是線性漸變它兼容性很好啊，是不是可以李代桃僵呢？

和一開始SVG圓環原理類似：
把我們的圓環分成左半部分和右半部分，左半部分是一套線性漸變，右半部分是另外一套線性漸變，然后最底部的線性漸變顏色是一樣的，理論上在視覺上看起來就能夠形成一個完美的環。

如下HTML和CSS代碼：

<div class="circle"><div class="circle-left"></div><div class="circle-right"></div> </div>復制代碼 .circle {width: 300px; height: 300px;border-radius: 50%;mask: radial-gradient(transparent 110px, #000 110px);overflow: hidden; } .circle-left {width: 50%; height: 100%;background: linear-gradient(to bottom, #EDE604, #FFCC00, #FEAC00, #FF8100, #FF5800, #FF3BA7, #CC42A2);float: left; } .circle-right {width: 50%; height: 100%;float: right;background: linear-gradient(to bottom, #9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2); }復制代碼

然而最后的效果卻是下面這樣：

咦，奇怪，同樣的實現原理，為什么一開始的SVG實現沒有這樣的現象呢？

實際上，SVG的實現底部的連接也是不完美的，但是由于我們上面的這個圓環漸變顏色比較少，同時顏色比較接近，因此不仔細看，根本看不出來，連接有問題的。

但是這里的12色漸變就不一樣了，漸變顏色跨度明顯區分大，因此很明顯看出來接縫有問題，那有沒有什么辦法可以解決這個問題呢？

有！我想的辦法是，就是在下面接縫不完美的地方打一個小補丁，就像是我國橋梁建造接縫處重新澆筑一樣，于是HTML變成下面這樣，增加一個.circle-bottom：

<div class="circle"><div class="circle-left"></div><div class="circle-right"></div><div class="circle-bottom"></div> </div>復制代碼

對應的CSS如下：

.circle-bottom {position: absolute; height: 40px; width: 30px;bottom: 3px; left: 0; right: 0;margin: auto;/* 下面兩個聲明是補丁關鍵 */background: linear-gradient(to right, #DB3FA3, #C443A3);filter: blur(5px); }復制代碼

也就是接縫處搞一個小小的水平漸變，同時適當高斯模糊，淡化邊界。然后肉眼所見的效果就變成下面這樣，幾乎看不出任何異常：

接下來就簡單了，同樣地，JS設置圓環clip-path動態剪裁，實現我們想要的倒計時效果。

眼見為實，您可以狠狠的點擊這里：linear-gradient線性漸變實現的多彩圓環demo

優點和不足
此方法的優點在于兼容性足夠（僅IE不支持），在移動端可以無障礙使用。

不足在于這個圓環的漸變并不是徑向發散的，而是自上而下的，和真正意義上的圓環漸變還是有些差異的。

那有沒有什么方法，既保證兼容性，同時漸變又是真正意義上的環形漸變呢？

四、借助CSS clip剪裁、transform旋轉和模糊濾鏡實現12色漸變圓環

此方法需要一定的理解成本，請容我慢慢道來。

1. 如何實現一個30°的扇形？

假設有如下HTML：

<div class="sector"></div>復制代碼

則下面的CSS可生成一個30°的扇形：

.sector {width: 300px; height: 300px;position: absolute;clip: rect(0 300px 300px 150px);overflow: hidden; } .sector::after {content: '';width: 100%; height: 100%;background: currentColor;position: absolute;clip: rect(0 150px 300px 0);transform: rotate(30deg);border-radius: 50%; }復制代碼

實時效果如下：

原理如下：

外面容器原本是個正方形，但通過clip剪裁只顯示右半部分；

子元素同樣尺寸，但通過clip剪裁只顯示左半部分。然后通過適當旋轉露出我們想要的扇形區域；

原理示意圖如下：

2. 如何使用12個30°扇形鋪成一個圓

很簡單，我們只要創新12個類似下面的HTML：

<div class="sector"></div>復制代碼

然后每個扇形元素比前面一個多選轉30度就可以了，然后每一個扇形設置一個漸變顏色，CSS類似下面：

.sector:nth-of-type(1) {transform: rotate(0);color: #9ED110; } /* 2-11 略 */ .sector:nth-of-type(12) {transform: rotate(330deg);color: #EDE604; }復制代碼

我們就可以得到類似下圖的效果：

3. 如何模糊扇形色塊的邊界？

這個我們可以借助CSS3的filter濾鏡中的高斯模糊實現，假設12個扇形元素全部都在一個類名為.sector-group的元素中，則：

.sector-group {filter: blur(15px); }復制代碼

效果如下圖：

然而高斯模糊的邊緣似乎有些問題，不是很清晰，怎么辦？

4. 模糊的圓環邊緣如何處理？

其實很簡單，外部容器尺寸限制，里面模糊元素適當transform比例放大就可以了，例如：

.circle {width: 300px; height: 300px;border-radius: 50%;position: relative;overflow: hidden; } .sector-group {filter: blur(15px);transform: scale(1.2); }復制代碼

此時效果為：

5. 使用mask遮罩是顯示邊緣圓環

CSS代碼示意如下（實際開發webkit前綴不可省略）

.circle {width: 300px; height: 300px;border-radius: 50%;position: relative;overflow: hidden;mask: radial-gradient(transparent 110px, #000 110px); } .sector-group {filter: blur(15px);transform: scale(1.2); }復制代碼

最終，我們的12色彩虹漸變圓環效果即達成，如下Firefox瀏覽器下截圖：

接下來就簡單了，同樣地，JS設置圓環clip-path動態剪裁，實現我們想要的倒計時效果。

眼見為實，您可以狠狠的點擊這里：借助CSS3 filter模糊和clip實現的多彩圓環demo

優點和不足
優點在于真正意義上的錐形漸變，同時12種漸變顏色頭首尾如貪吃蛇一樣，完全融為了一體，更有視覺優勢。

不足之處在于HTML和CSS代碼稍微多了點。

四、結束語

嚴格來講，本文一共介紹了四種彩色圓環漸變效果的實現，可以說各有優缺點，大家可以根據自己項目情況，選擇合適的方法實現。

然而一個人的積累總是有限，而創意總是無限的，因此一定還有其他更好更妙更簡單的實現，歡迎分享歡迎指教！

當然彩色漸變圓環效果不一定是用在倒計時上，例如下圖這種loading效果（下圖是圖片實現的）實際上也可以完全通過CSS實現了，比較推薦的做法是使用左右半區的線性漸變加遮罩（在retina屏幕下效果真的贊），具體代碼就不展示了，大家可以自己作為課后作業實踐實踐。

以上就是本文的全部內容，內容略多，感謝一直閱讀到此處！

轉載于:https://juejin.im/post/5bb337706fb9a05ce02a8c4a

總結

以上是生活随笔為你收集整理的3种纯CSS实现中间镂空的12色彩虹渐变圆环方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。