一、從SVG實(shí)現(xiàn)多彩圓環(huán)倒計(jì)時(shí)效果說(shuō)起
上周我做了個(gè)demo，使用SVG和stroke-dasharray和stroke-dashoffset特性實(shí)現(xiàn)了一個(gè)彩條圓環(huán)倒計(jì)時(shí)效果，大概長(zhǎng)下面這樣子：

彩條圓環(huán)

原理是使用兩個(gè)漸變半圓無(wú)縫疊加在一起。

使用SVG實(shí)現(xiàn)的優(yōu)點(diǎn)是兼容性非常好，IE9瀏覽器也是支持的。

不足在于學(xué)習(xí)成本比較高，相關(guān)的SVG代碼要想完整的手寫出來(lái)，還是需要不少積累的。

于是我就琢磨有沒有更簡(jiǎn)單的方法實(shí)現(xiàn)類似的多彩圓環(huán)漸變效果，最好純CSS就能搞定。

絞盡腦汁想出了下面三種實(shí)現(xiàn)方法，為了盡可能驗(yàn)證方法的可行性，我把圓環(huán)的漸變顏色從3色變成了12色。

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

二、借助CSS3 conic-gradient錐形漸變實(shí)現(xiàn)12色漸變圓環(huán)
環(huán)形帶上的漸變效果，本質(zhì)上就是一種錐形漸變，因此，我們直接使用，CSS3 conic-gradient錐形漸變實(shí)現(xiàn)應(yīng)該是最簡(jiǎn)單最直接的方法。

如下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%;
}
此時(shí)的效果如下圖所示：

12色錐形漸變效果截圖

但是我們需要的效果不是圓餅，而是一個(gè)圓環(huán)，也就是中間區(qū)域需要鏤空。

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

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

我們可以借助CSS3遮罩mask屬性來(lái)實(shí)現(xiàn)，CSS3 mask遮罩除了支持PNG圖片，SVG圖形，其還支持CSS3漸變背景圖。于是，我們只需要使用CSS3徑向漸變r(jià)adial-gradient語(yǔ)法生成一個(gè)中間透明，邊緣實(shí)色的圓環(huán)即可。

于是有（這里省略了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色圓環(huán)漸變效果就實(shí)現(xiàn)了：

錐形漸變下的12色彩虹圓環(huán)效果

再配合JS設(shè)置clip-path剪裁我們的圖形，就可以實(shí)現(xiàn)12色的彩虹圓環(huán)倒計(jì)時(shí)效果了。

眼見為實(shí)，您可以狠狠地點(diǎn)擊這里：借助CSS3 mask遮罩和conic-gradient實(shí)現(xiàn)的多彩圓環(huán)demo

優(yōu)點(diǎn)和不足
這個(gè)方法看上去很簡(jiǎn)單，很完美，但是卻有個(gè)致命的缺陷，那就是兼容性問(wèn)題！

CSS3錐形漸變conic-gradient目前僅Chrome瀏覽器才支持，并且Chrome瀏覽器還是需要開啟實(shí)驗(yàn)功能選項(xiàng)才能支持！

錐形漸變?cè)愀獾募嫒菪詥?wèn)題

因此當(dāng)下此方法基本上沒有在實(shí)際項(xiàng)目中應(yīng)用的可能性，需要看看有沒有什么其他解決方案？

三、借助CSS3 linear-gradient線性漸變近似實(shí)現(xiàn)12色漸變圓環(huán)
雖然錐形漸變?yōu)g覽器的兼容性不怎么樣，但是線性漸變它兼容性很好啊，是不是可以李代桃僵呢？

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

如下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);
}
然而最后的效果卻是下面這樣：

兩個(gè)漸變無(wú)縫連接失敗示意

咦，奇怪，同樣的實(shí)現(xiàn)原理，為什么一開始的SVG實(shí)現(xiàn)沒有這樣的現(xiàn)象呢？

實(shí)際上，SVG的實(shí)現(xiàn)底部的連接也是不完美的，但是由于我們上面的這個(gè)圓環(huán)漸變顏色比較少，同時(shí)顏色比較接近，因此不仔細(xì)看，根本看不出來(lái)，連接有問(wèn)題的。

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

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

<div class="circle">
    <div class="circle-left"></div>
    <div class="circle-right"></div>
    <div class="circle-bottom"></div>
</div>
對(duì)應(yīng)的CSS如下：

.circle-bottom {
    position: absolute;
    height: 40px; width: 30px;
    bottom: 3px; left: 0; right: 0;
    margin: auto;
    /* 下面兩個(gè)聲明是補(bǔ)丁關(guān)鍵 */
    background: linear-gradient(to right, #DB3FA3, #C443A3);
    filter: blur(5px);
}
也就是接縫處搞一個(gè)小小的水平漸變，同時(shí)適當(dāng)高斯模糊，淡化邊界。然后肉眼所見的效果就變成下面這樣，幾乎看不出任何異常：

接縫處打完補(bǔ)丁之后的圓環(huán)效果

接下來(lái)就簡(jiǎn)單了，同樣地，JS設(shè)置圓環(huán)clip-path動(dòng)態(tài)剪裁，實(shí)現(xiàn)我們想要的倒計(jì)時(shí)效果。

眼見為實(shí)，您可以狠狠的點(diǎn)擊這里：linear-gradient線性漸變實(shí)現(xiàn)的多彩圓環(huán)demo

優(yōu)點(diǎn)和不足
此方法的優(yōu)點(diǎn)在于兼容性足夠（僅IE不支持），在移動(dòng)端可以無(wú)障礙使用。

不足在于這個(gè)圓環(huán)的漸變并不是徑向發(fā)散的，而是自上而下的，和真正意義上的圓環(huán)漸變還是有些差異的。

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

四、借助CSS clip剪裁、transform旋轉(zhuǎn)和模糊濾鏡實(shí)現(xiàn)12色漸變圓環(huán)
此方法需要一定的理解成本，請(qǐng)容我慢慢道來(lái)。

1. 如何實(shí)現(xiàn)一個(gè)30°的扇形？
假設(shè)有如下HTML：

<div class="sector"></div>
則下面的CSS可生成一個(gè)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%;
}
實(shí)時(shí)效果如下：

原理如下：

外面容器原本是個(gè)正方形，但通過(guò)clip剪裁只顯示右半部分；
子元素同樣尺寸，但通過(guò)clip剪裁只顯示左半部分。然后通過(guò)適當(dāng)旋轉(zhuǎn)露出我們想要的扇形區(qū)域；
原理示意圖如下：

30度扇形生成原理示意圖

2. 如何使用12個(gè)30°扇形鋪成一個(gè)圓
很簡(jiǎn)單，我們只要?jiǎng)?chuàng)新12個(gè)類似下面的HTML：

<div class="sector"></div>
然后每個(gè)扇形元素比前面一個(gè)多選轉(zhuǎn)30度就可以了，然后每一個(gè)扇形設(shè)置一個(gè)漸變顏色，CSS類似下面：

.sector:nth-of-type(1) {
    transform: rotate(0);
    color: #9ED110;   
}
/* 2-11 略 */
.sector:nth-of-type(12) {
    transform: rotate(330deg);
    color: #EDE604;   
}
我們就可以得到類似下圖的效果：

12色的漸變圓環(huán)效果

3. 如何模糊扇形色塊的邊界？
這個(gè)我們可以借助CSS3的filter濾鏡中的高斯模糊實(shí)現(xiàn)，假設(shè)12個(gè)扇形元素全部都在一個(gè)類名為.sector-group的元素中，則：

.sector-group {
    filter: blur(15px);
}
效果如下圖：

高斯模糊后的效果

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

4. 模糊的圓環(huán)邊緣如何處理？
其實(shí)很簡(jiǎn)單，外部容器尺寸限制，里面模糊元素適當(dāng)transform比例放大就可以了，例如：

.circle {
    width: 300px; height: 300px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.sector-group {
    filter: blur(15px);
    transform: scale(1.2);
}
此時(shí)效果為：

邊緣輪廓清晰的圓環(huán)圖

5. 使用mask遮罩是顯示邊緣圓環(huán)
CSS代碼示意如下（實(shí)際開發(fā)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色彩虹漸變圓環(huán)效果即達(dá)成，如下Firefox瀏覽器下截圖：

Firefox瀏覽器下的彩虹圓環(huán)效果截圖

接下來(lái)就簡(jiǎn)單了，同樣地，JS設(shè)置圓環(huán)clip-path動(dòng)態(tài)剪裁，實(shí)現(xiàn)我們想要的倒計(jì)時(shí)效果。

眼見為實(shí)，您可以狠狠的點(diǎn)擊這里：借助CSS3 filter模糊和clip實(shí)現(xiàn)的多彩圓環(huán)demo

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

不足之處在于HTML和CSS代碼稍微多了點(diǎn)。

四、結(jié)束語(yǔ)
嚴(yán)格來(lái)講，本文一共介紹了四種彩色圓環(huán)漸變效果的實(shí)現(xiàn)，可以說(shuō)各有優(yōu)缺點(diǎn)，大家可以根據(jù)自己項(xiàng)目情況，選擇合適的方法實(shí)現(xiàn)。

然而一個(gè)人的積累總是有限，而創(chuàng)意總是無(wú)限的，因此一定還有其他更好更妙更簡(jiǎn)單的實(shí)現(xiàn)，歡迎分享歡迎指教！

當(dāng)然彩色漸變圓環(huán)效果不一定是用在倒計(jì)時(shí)上，例如下圖這種loading效果（下圖是圖片實(shí)現(xiàn)的）實(shí)際上也可以完全通過(guò)CSS實(shí)現(xiàn)了，比較推薦的做法是使用左右半?yún)^(qū)的線性漸變加遮罩（在retina屏幕下效果真的贊），具體代碼就不展示了，大家可以自己作為課后作業(yè)實(shí)踐實(shí)踐。

以上就是本文的全部?jī)?nèi)容，內(nèi)容略多，感謝一直閱讀到此處！

責(zé)任編輯：中山網(wǎng)站建設(shè)
 【網(wǎng)訊網(wǎng)絡(luò)】國(guó)家高新技術(shù)企業(yè)》十一年專注軟件開發(fā)，網(wǎng)站建設(shè)，網(wǎng)頁(yè)設(shè)計(jì)，APP開發(fā)，小程序，微信公眾號(hào)開發(fā)，定制各類企業(yè)管理軟件（OA、CRM、ERP、OMS訂單管理系統(tǒng)、WMS進(jìn)銷存管理軟件等)！服務(wù)熱線：0760-88610046、13924923903，http://m.denorpool.com