Ba la la la ~ 讀者朋友們，你們好啊，又到了冷鋒時(shí)間，話不多說，發(fā)車！
conic-gradient 是個(gè)什么？說到 conic-gradient ，就不得不提的它的另外兩個(gè)兄弟：
linear-gradient : 線性漸變
radial-gradient : 徑向漸變
說這兩個(gè)應(yīng)該還是有很多人了解并且使用過的。CSS3 新增的線性漸變及徑向漸變給 CSS 世界帶來了很大的變化。
而 conic-gradient ，表示圓錐漸變，另外一種漸變方式，給 CSS 世界帶來了更多可能。
API
看看它最簡單的 API：
{
/* Basic example */
background: conic-gradient(deeppink, yellowgreen);
}
與線性漸變及圓錐漸變的異同
linear-gradient 線性漸變的方向是一條直線，可以是任何角度
radial-gradient徑向漸變是從圓心點(diǎn)以橢圓形狀向外擴(kuò)散
conic-gradient 不僅僅只是從一種顏色漸變到另一種顏色，與另外兩個(gè)漸變一樣，可以實(shí)現(xiàn)多顏色的過渡漸變。
由此，想到了彩虹，我們可以依次列出 赤橙黃綠青藍(lán)紫 七種顏色：
conic-gradient: (red, orange, yellow, green, teal, blue, purple)
上面表示，在圓錐漸變的過程中，顏色從設(shè)定的第一個(gè) red 開始，漸變到 orange ，再到 yellow ，一直到最后設(shè)定的 purple 。并且每一個(gè)區(qū)間是等分的。
我們再給加上 border-radius: 50% ，假設(shè)我們的 CSS 如下，
{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red, orange, yellow, green, teal, blue, purple);
}
美化，除了 rgb() 顏色表示法之外，還有 hsl() 表示法。
hsl() 被定義為色相-飽和度-明度（Hue-saturation-lightness）
色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。
飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數(shù)值。
明度（V），亮度（L），取0-100%。
也就是采用這樣一個(gè)過渡 hsl(0%, 100%, 50%) –> hsl(100%, 100%, 50%)，中間只改變色相，生成 20 個(gè)過渡狀態(tài)。借助 SCSS ，CSS 語法如下:
$colors: ();
$totalStops:20;
<a >@for</a> $i from 0 through $totalStops{
$colors: append($colors, hsl($i *(360deg/$totalStops), 100%, 50%), comma);
}
.colors {
width: 200px;
height: 200px;
background: conic-gradient($colors);
border-radius: 50%;
}
配合百分比使用
當(dāng)然，我們可以更加具體的指定圓錐漸變每一段的比例，配合百分比，可以很輕松的實(shí)現(xiàn)餅圖。
假設(shè)我們有如下 CSS：
{
width: 200px;
height: 200px;
background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
border-radius: 50%;
}
我們分別指定了 030%，30%70%，70%~100% 三個(gè)區(qū)間的顏色分別為 deeppink(深紅)，yellowgreen(黃綠) 以及 teal(青)
當(dāng)然，上面只是百分比的第一種寫法，還有另一種寫法也能實(shí)現(xiàn)：
{
background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, teal 0 100%);
}
這里表示 ：
0-30% 的區(qū)間使用 deeppink
0-70% 的區(qū)間使用 yellowgreen
0-100% 的區(qū)間使用 teal
而且，先定義的顏色的層疊在后定義的顏色之上。
配合 background-size 使用
使用了百分比控制了區(qū)間，再配合使用 background-size 就可以實(shí)現(xiàn)各種貼圖啦。
我們首先實(shí)現(xiàn)一個(gè)基礎(chǔ)圓錐漸變圖形如下：
{
width: 250px;
height: 250px;
margin: 50px auto;
background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
}
再加上 background-size: 50px 50px;，也就是：
{
width: 250px;
height: 250px;
margin: 50px auto;
background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
background-size: 50px 50px;
}
重復(fù)圓錐漸變 repaeting-conic-gradient
與線性漸變及徑向漸變一樣，圓錐漸變也是存在重復(fù)圓錐漸變 repaet-conic-gradient 的。
我們假設(shè)希望不斷重復(fù)的片段是 0~30° 的一個(gè)片段，它的 CSS 代碼是 conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg) 。
那么，使用了 repaeting-conic-gradient 之后，會自動填充滿整個(gè)區(qū)域，CSS 代碼如下：
{
width: 200px;
height: 200px;
background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
border: 1px solid #000;
}
圓錐漸變動畫
借助 SCSS 的強(qiáng)大，我們可以制作出一些非?？犰诺谋尘罢拱?。
使用 SCSS ，我們隨機(jī)生成一個(gè)多顏色的圓錐漸變圖案：
假設(shè)我們的 HTML 結(jié)構(gòu)如下：
<div></div>
CSS/SCSS 代碼如下：
@function randomNum($max, $min: 0, $u: 1) {
<a >@return</a> ($min + random($max)) * $u;
}
@function randomConicGradient() {
$n: random(30) + 10;
$list: ();
<a >@for</a> $i from 0 to $n {
$list: $list, rgb(randomNum(255), randomNum(255), randomNum(255));
}
<a >@return</a> conic-gradient($list, nth($list, 1));
}
div {
width: 100vw;
height: 100vh;
background: randomConicGradient();
}
簡單解釋下上面的 SCSS 代碼，
randomNum() 用于生成隨機(jī)數(shù)，randomNum(255) 相當(dāng)于隨機(jī)生成 1~255 的隨機(jī)數(shù)；
randomConicGradient() 用于生成整個(gè) conic-gradient() 內(nèi)的參數(shù)，也就是每一區(qū)間的顏色；
vw 和 vh 是比較新的 CSS 單位，一個(gè)頁面而言，它的視窗的高度就是 100vh，寬度就是 100vw 。
以上為個(gè)人意見，如有雷同，純屬巧合，歡迎大家多提意見！Bey 了 個(gè) Bey ~
