CSS3 Gradient 漸變還能這麼玩

瀏覽器支持兩種類型的漸變：線性漸變 (linear-gradient)，徑向漸變 (radial-gradient)

漸變在 CSS 中屬於一種 Image 類型，能夠結合 background-image 屬性使用

和圖片不一樣的是，漸變不須要引入，而是由代碼直接生成的，因此比圖片更高效易用

 

1、簡單線性漸變

基礎語法：linear-gradient( angle, start-color, end-color )

其中 start-color 是漸變的初始顏色，end-color 是結束的顏色，這些顏色統稱爲色標

angle 是漸變的角度，能夠是具體的角度（45deg），也能夠是 to + 方向（to bottom right）

如：

background: linear-gradient(70deg, red, yellow);

漸變的色標也能夠是多個：

background: linear-gradient(90deg, red, yellow, green, blue, black);

從上圖能夠看到，這些顏色會均勻的分佈開

若是須要自定義間距，能夠在色標後面接具體的位置

background: linear-gradient(90deg, red 40px, yellow 15%, green 95%, blue );

雖然位置能夠用具體的長度(px)，但爲了自適應，最好是使用百分比

 

2、多圖層的線性漸變

漸變做爲一種 Image 類型，在 background-image 中使用的時候，是能夠疊加的

如：

background-image: 

linear-gradient(90deg,rgba(255,0,0,.5), rgba(255,255,0,0.5)),

linear-gradient(180deg,rgba(0,0,255,.5), rgba(0,255,0,0.5));

固然一般不須要疊加兩個線性漸變

但若是是漸變結合底圖的話...

background-image:

linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),

url(/assets/image.jpg);

就能實現這種圖片的漸隱效果了 

 

3、徑向漸變

徑向漸變和線性漸變的語法相似，添加兩個色標就能夠獲得一個漸變

基礎語法：radial-gradient( start-color, end-color )

如：

background-image: radial-gradient(red 5%, yellow 50%, green 90%);

徑向漸變不須要定義方向，但能夠定義的參數還有不少，好比形狀、圓心位置、大小

好比上面徑向漸變的容器是一個正方形，若是改爲長方形，但採用一樣的漸變：

能夠看到漸變的形狀變成了一個軸對齊的橢圓，若是但願依舊保持正圓，能夠設定其形狀

形狀(shape)有兩個可選參數：ellipse - 橢圓 (默認值)、circle - 正圓

background-image: radial-gradient(circle, red 5%, yellow 50%, green 90%);

還可使用 形狀(shape) + at + 位置(position) 的語句來描述圓心的位置

background-image: radial-gradient(circle at right bottom, red, yellow, green );

上面代碼中的 right bottom 就是設置的圓心位置，也能夠設置爲具體的數值：circle at 0px 50px

 

4、徑向漸變的半徑

咱們能夠用下面四個關鍵字來描述漸變的半徑：

closest-side	從圓心到最近的邊之間的距離做爲半徑
closest-corner	從圓心到最近的角之間的距離做爲半徑
farthest-side	從圓心到最遠的邊之間的距離做爲半徑
farthest-corner	從圓心到最遠的角之間的距離做爲半徑

 

 

 

 

除了這四個關鍵字以外，也可使用具體的數值（百分數除外）做爲半徑的長度，好比 30px, 40vw

background-image: radial-gradient(30px 70px at center,red, yellow, green );

到這裏已經介紹了徑向漸變的三種參數：形狀(shape)、圓心位置(position)、半徑長度(length)

在使用的時候須要注意：圓心位置須要用 at 銜接，而形狀和半徑不用

1. 形狀 + 圓心位置： radial-gradient( circle at center,red, yellow ) 

2. 形狀 + 半徑長度： radial-gradient( circle closest-side,red, yellow ) 

3. 半徑長度 + 圓心位置： radial-gradient( closest-side at center, red, yellow ) 

4. 形狀 + 半徑長度 + 圓心位置： radial-gradient( ellipse farthest-side at right bottom ,red, yellow ) 

 

5、重複的漸變

若是須要實現一個重複的漸變，可使用 repeating-linear-gradient 和 repeating-radial-gradient

先經過兩張圖來看看 repeating-linear-gradient 和 linear-gradient 的區別：

background-image: linear-gradient(90deg, red, yellow 20px, black 40px);

background-image: repeating-linear-gradient(90deg, red, yellow 20px, black 40px);

所謂重複漸變就是將本來的漸變無限循環，但如何判斷從什麼位置開始循環呢？或者說如何判斷一段漸變的長度呢？

其關鍵因素在於色標的位置，好比上面的 red, yellow 20px, black 40px  

就是在 0px 位置加了一個顏色爲 red 的標記，20px 的位置加了一個 yellow 標記，40px 的位置加了一個 black 標記

因此這段漸變的長度爲最後一個標記的位置，即 40px

基於這一點，就能夠設計出不少好玩的漸變：

background-image: repeating-linear-gradient(45deg, white, white 5px, black 5px, black 10px);

background-image: repeating-radial-gradient(circle, white, white 5px, black 5px, black 10px);

background-image:
repeating-linear-gradient(45deg, #b50642, #b50642 10px, transparent 10px, transparent 20px), 
repeating-linear-gradient(-45deg, #b50642, #b50642 10px, transparent 10px, transparent 20px), 
linear-gradient(#9bdaf3, #9bdaf3);

background-color: #000;
background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
      rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px);

// 上面這個漸變轉自《使用CSS漸變》

 

6、用漸變作一個進度條 

一般項目中須要使用 CSS 變量的時候，都會經過 Sass 和 Less 來定義

不過 CSS 自己也能夠經過 -- 來聲明變量（和 Sass 的 $ 相似），而後經過 var() 來調用

body { --bg: red; background-color: var(--bg);
}

在使用 -- 聲明變量名時，須要注意區分變量名的大小寫

並且 -- 只能用來聲明屬性值，不能做用屬性名

 var() 函數還能夠接受第二個參數，做爲第一個參數的默認值

 

若是咱們將進度條的加載進度用一個 CSS 變量來表示，而後經過 js 實時修改這個變量，就能實現進度條的效果

話很少說，直接上乾貨：

// 這種方案是在掘金上看到的，惋惜寫博客的時候已經找不到連接，若是有知道的小夥伴請給我留言

--color: #67e035;
--position: 60%;
height: 30px;
background-color: #e4e4e4;
border-radius: 15px;
background-repeat: no-repeat;
background-size: 100%, var(--position);
background-image: 
radial-gradient(closest-side circle at var(--position), var(--color), var(--color) 100%, transparent), 
linear-gradient(var(--color), var(--color));

在項目中應用的時候，只須要實時修改 --position 的值，就能夠實現進度條效果

 

 

參考文章：

《使用CSS漸變》