神奇的 conic-gradient 圓錐漸變

時間  2019-12-11
標籤 神奇 conic gradient 圓錐 漸變 简体版
原文   原文鏈接

感謝 LeaVerou 大神，讓咱們能夠提早使用上這麼美妙的屬性。css

conic-gradient 是個什麼？說到 conic-gradient ，就不得不提的它的另外兩個兄弟：html

  • linear-gradient : 線性漸變
    lg
  • radial-gradient : 徑向漸變
    rg

說這兩個應該仍是有不少人瞭解而且使用過的。CSS3 新增的線性漸變及徑向漸變給 CSS 世界帶來了很大的變化。git

而 conic-gradient ，表示圓錐漸變，另一種漸變方式，給 CSS 世界帶來了更多可能。github

下面進入正文，本文中全部示例，請在高版本 Chrome 內核下預覽。ajax

 

API

看看它最簡單的 API：瀏覽器

1
2
3
4
{
     /* Basic example */
     background : conic-gradient(deeppink, yellowgreen);
}

image

與線性漸變及圓錐漸變的異同

那麼它和另外兩個漸變的區別在哪裏呢？app

  • linear-gradient 線性漸變的方向是一條直線，能夠是任何角度
  • radial-gradient徑向漸變是從圓心點以橢圓形狀向外擴散

而從方向上來講，圓錐漸變的方向是這樣的：dom

conic-gradient漸變方向

劃重點：測試

從圖中能夠看到，圓錐漸變的漸變方向和起始點。起始點是圖形中心，而後以順時針方向繞中心實現漸變效果。動畫

 

使用 conic-gradient 實現顏色錶盤

從上面瞭解了 conic-gradient 最簡單的用法，咱們使用它實現一個最簡單的顏色錶盤。

conic-gradient 不只僅只是從一種顏色漸變到另外一種顏色，與另外兩個漸變同樣，能夠實現多顏色的過渡漸變。

由此，想到了彩虹，咱們能夠依次列出 赤橙黃綠青藍紫 七種顏色：

  • conic-gradient: (red, orange, yellow, green, teal, blue, purple)

上面表示，在圓錐漸變的過程當中，顏色從設定的第一個 red 開始，漸變到 orange ，再到 yellow ，一直到最後設定的 purple 。而且每個區間是等分的。

咱們再給加上 border-radius: 50% ，假設咱們的 CSS 以下，

1
2
3
4
5
6
{
     width :  200px ;
     height :  200px ;
     border-radius:  50% ;
     background : conic-gradient( red , orange, yellow,  green ,  teal ,  blue ,  purple );
}

看看效果：

image

wow，已經有了初步形狀了。可是，總感受哪裏不大天然。總之，渾身難受 fxxk

嗯？問題出在哪裏呢？一是顏色不夠豐富不夠明亮，二是起始處與結尾處銜接不夠天然。讓我再稍微調整一下。

咱們知道，表示顏色的方法，除了 rgb() 顏色表示法以外，還有 hsl() 表示法。

hsl() 被定義爲色相-飽和度-明度（Hue-saturation-lightness）

  • 色相（H）是色彩的基本屬性，就是日常所說的顏色名稱，如紅色、黃色等。
  • 飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數值。
  • 明度（V），亮度（L），取0-100%。

這裏，咱們經過改變色相獲得一個較爲明亮完整的顏色色系。

也就是採用這樣一個過渡 hsl(0%, 100%, 50%) --> hsl(100%, 100%, 50%)，中間只改變色相，生成 20 個過渡狀態。藉助 SCSS ，CSS 語法以下:

1
2
3
4
5
6
7
8
9
10
11
12
13
$colors: ();
$totalStops: 20 ;
 
@for $i from  0  through $totalStops{
     $colors: append($colors, hsl($i *( 360 deg/$totalStops),  100% ,  50% ), comma);
}
 
.colors {
     width :  200px ;
     height :  200px ;
     background : conic-gradient($colors);
     border-radius:  50% ;
}

獲得以下效果圖，此次的效果很好：

image

CodePen Demo -- conic-gradinet colors

 

配合百分比使用

固然，咱們能夠更加具體的指定圓錐漸變每一段的比例，配合百分比，能夠很輕鬆的實現餅圖。

假設咱們有以下 CSS：

1
2
3
4
5
6
{
     width :  200px ;
     height :  200px ;
     background : conic-gradient(deeppink  0 , deeppink  30% , yellowgreen  30% , yellowgreen  70% ,  teal  70% ,  teal  100% );
     border-radius:  50% ;
}

上圖，咱們分別指定了 0~30%，30%~70%，70%~100% 三個區間的顏色分別爲 deeppink(深紅)，yellowgreen(黃綠) 以及 teal(青) ，能夠獲得以下餅圖：

image

固然，上面只是百分比的第一種寫法，還有另外一種寫法也能實現：

1
2
3
{
     background : conic-gradient(deeppink  0  30% , yellowgreen  0  70% ,  teal  0  100% );
}

這裏表示 ：

  1. 0-30% 的區間使用 deeppink
  2. 0-70% 的區間使用 yellowgreen
  3. 0-100% 的區間使用 teal

並且，先定義的顏色的層疊在後定義的顏色之上。

CodePen Demo -- use proportion in conic-gradient

 

 

配合 background-size 使用

使用了百分比控制了區間，再配合使用 background-size 就能夠實現各類貼圖啦。

咱們首先實現一個基礎圓錐漸變圖形以下：

1
2
3
4
5
6
{
     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 );
}

效果圖：

image

再加上 background-size: 50px 50px;，也就是：

1
2
3
4
5
6
7
{
     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 ;
}

獲得：

image

CodePen Demo -- conic-gradient wallpaper

 

 

重複圓錐漸變 repaeting-conic-gradient

與線性漸變及徑向漸變同樣，圓錐漸變也是存在重複圓錐漸變 repaet-conic-gradient 的。

咱們假設但願不斷重複的片斷是 0~30° 的一個片斷，它的 CSS 代碼是 conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg) 。

image

那麼，使用了 repaeting-conic-gradient 以後，會自動填充滿整個區域，CSS 代碼以下：

1
2
3
4
5
6
{
     width :  200px ;
     height :  200px ;
     background : repeating-conic-gradient(deeppink  0  15 deg, yellowgreen  0  30 deg);
     border :  1px  solid  #000 ;
}

image

CodePen Demo -- repeating-conic-gradient

 

 

圓錐漸變更畫

基本的一些用法瞭解完了，看看使用圓錐漸變能夠玩出什麼花來。

藉助 SCSS 的強大，咱們能夠製做出一些很是酷炫的背景展板。

使用 SCSS ，咱們隨機生成一個多顏色的圓錐漸變圖案：

假設咱們的 HTML 結構以下：

1
< div ></ div >

CSS/SCSS 代碼以下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@function randomNum($max, $min:  0 , $u:  1 ) {
     @return ($min + random($max)) * $u;
}
 
@function randomConicGradient() {
     $n: random( 30 ) +  10 ;
     $list: ();
     
     @for $i from  0  to $n {
         $list: $list,  rgb (randomNum( 255 ), randomNum( 255 ), randomNum( 255 ));
     }
         
     @return conic-gradient($list, nth($list,  1 ));
}
 
div {
     width :  100 vw;
     height :  100 vh;
     background : randomConicGradient();
}

簡單解釋下上面的 SCSS 代碼，

  • randomNum() 用於生成隨機數，randomNum(255) 至關於隨機生成 1~255 的隨機數；
  • randomConicGradient() 用於生成整個 conic-gradient() 內的參數，也就是每一區間的顏色；
  • vw 和 vh 是比較新的 CSS 單位，一個頁面而言，它的視窗的高度就是 100vh，寬度就是 100vw 。

OK，刷新頁面，獲得以下效果圖：

image

臥槽，很酷炫，bling bling 閃閃發光的感受啊！並且是隨機生成的各類顏色，因此每次刷新都有新體驗有木有！！

blingblig

還沒完，接下來給它加上旋轉動畫，蹬蹬蹬，旋轉起來大概是這樣：

rotate-conic

因爲 GIF 圖大小的限制，只看 GIF 沒辦法感覺到全屏下那種科幻眩暈的感受，牆裂建議你戳進來看看：

CodePen Demo -- conic-gradient Animation

 

腦洞時刻

到這裏我仍是不是很知足。想到了以前的 mix-blend-mode 屬性。

想了解 mix-blend-mode 這個屬性，能夠戳我看看：難以想象的顏色混合模式 mix-blend-mode

若是多個圓錐漸變層級疊加，而且運用上 mix-blend-mode 會發生什麼？好可怕的想法...

xx

最終搗鼓出這種很是科幻的效果：

rotate-conic2

上圖使用了 2 個半透明的圓錐漸變，相對反向進行旋轉，而且在底層使用 mix-blend-mode: overlay 疊加了一個白黑徑向漸變圖層。能夠看看代碼及效果：

CodePen Demo -- conic-gradient Animation

 

 

在項目中使用 conic-gradient

上面的例子酷炫歸酷炫，可是在項目中實用性不強。那麼圓錐漸變是否能用於業務中的？答案是確定的。

看看下面這個圖，芝麻信用分背景漸變顏色條，不使用 JS，純 CSS 藉助 conic-gradient 如何畫出來。

zhima

假設咱們的結構以下：

1
2
3
< div  class="bg">
     < div  class="point"></ div >
</ div >

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.bg {
     position :  relative ;
     margin :  50px  auto ;
     width :  400px ;
     height :  400px ;
     border-radius:  50% ;
     background : conic-gradient( #f1462c  0% ,  #fc5d2c  12.4% ,  #fff  12.5% ,  #fff  12.5% ,  #fc5d2c  12.5% ,  #fba73e  24.9% ,  #fff  24.9% ,  #fff  25% ,  #fba73e  25% ,  #e0fa4e  37.4% ,  #fff  37.4% ,  #fff  37.5% ,  #e0fa4e  37.5% ,  #12dd7e  49.9% ,  #fff  49.9% ,  #fff  50% ,  #12dd7e  50% ,  #0a6e3f  62.4% ,  #fff  62.4% ,  #fff  62.5% );
     transform: rotate( -112.5 deg);
     transform-origin:  50%  50% ;
}
 
.bg::before {
     content :  "" ;
     position :  absolute ;
     top :  50% ;
     left :  50% ;
     transform: translate( -50% ,  -50% );
     width :  370px ;
     height :  370px ;
     border-radius:  50% ;
     background :  #fff ;
}
 
.bg::after {
     content :  "" ;
     position :  absolute ;
     top :  50% ;
     left :  50% ;
     transform: translate( -50% ,  -50% );
     width :  320px ;
     height :  320px ;
     border-radius:  50% ;
     background :
         radial-gradient( #fff  0% ,  #fff  25% ,  transparent  25% ,  transparent  100% ),
         conic-gradient( #f1462c  0  12.5% ,  #fba73e  0  25% ,  #e0fa4e  0  37.5% ,  #12dd7e  0  50% ,  #0a6e3f  0  62.5% ,  #fff  0  100% );
         
}
 
.point {
     position :  absolute ;
     width :  30px ;
     height :  30px ;
     transform: translate( -50% ,  -50% );
     left :  50% ;
     top :  50% ;
     background : radial-gradient( #467dc6  0% ,  #a4c6f3  100% );
     border-radius:  50% ;
     z-index :  999 ;
}
 
.point::before {
     content :  "" ;
     position :  absolute ;
     width :  5px ;
     height :  350px ;
     left :  50% ;
     top :  50% ;
     transform: translate( -50% ,  -50% ) rotate( 0 );
     border-radius:  100%  100%  5%  5% ;
     background : linear-gradient(
         180 deg,
         #9bc7f6  0 ,
         #467dc6  50% ,
         transparent  50% ,
         transparent  100%
     );
     animation: rotate  3 s cubic-bezier(. 93 ,  1.32 , . 89 ,  1.15 ) infinite;
}
 
@keyframes rotate {
     50%  {
         transform: translate( -50% ,  -50% ) rotate( 150 deg);
     }
     100%  {
         transform: translate( -50% ,  -50% ) rotate( 150 deg);
     }
}　

爲了凸顯 conic-gradient 的實用性，簡單將兩者合二爲一，模擬了一下。看看效果，大功告成，因此說 conic-gradient 仍是有用武之地的：

credit-conic

CodePen Demo -- 使用 conic-gradient 實現錶盤信用分示例

 

 

圓錐漸變 conic-gradient polyfill 墊片庫

看到這裏，想必讀者們都躍躍欲試這麼神奇的屬性。

可是，按照慣例，這種 「高科技」 一般兼容性都不怎麼滴。conic-gradient 兼容性又如何呢？

很是慘烈，CSS 官方對其的描述是：

  • 處於修正階段的模塊(Modules in the revising phase)

處於修正階段的模塊沒有處於改善階段的模塊穩定。一般它們的語法還須要詳細審查，說不定還會有很大的變化，並且不保證和以前的兼容。替代的語法一般通過測試並已經實現。

萬幸的是，在文章開頭我也提到了，感謝 LeaVerou 大神，讓咱們能夠提早使用上這麼美妙的屬性。

LeaVerou 提供了一個墊片庫，按照本文上述的語法，添加這個墊片庫，就能夠開心的使用起來啦。

polyfill 是一個開發術語，在 Web 開發中，polyfill 墊片庫的準確意思爲：用於實現瀏覽器並不支持的原生API的代碼。如今引伸爲實現瀏覽器並不支持的某些功能的兼容庫。

你須要添加以下的 JS ，墊片庫會按照 CSS 語法，生成對應的圓錐漸變圖案，而且轉化爲 BASE64 代碼：

1
2
< 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 >

由於墊片庫的做用是將咱們的 CSS 語法轉化成爲 BASE64 代碼替換 background-image: url() 中的內容，因此，上線後是不須要再添加這兩個庫的。

 

參考文獻

CSS conic-gradient() polyfill

 

最後

系列 CSS 文章彙總在個人 Github 。

好了，本文到此結束，但願對你有幫助 :)

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

來源：http://www.cnblogs.com/coco1s/p/7079529.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程