彩條圓環倒計時效果，大概長下面這樣子：
原理是使用兩個漸變半圓無縫疊加在一起。
使用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動態剪裁，實現我們想要的倒計時效果。