純CSS輸出漸變色背景圖案 | linear-gradient

這是我參與8月更文挑戰的第12天，活動詳情查看：8月更文挑戰css

CSS漸變色逃不過的一個函數就是linear-gradienthtml

MDN官方文檔：developer.mozilla.org/zh-CN/docs/…markdown

linear-gradient定義爲：框架

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]
複製代碼

這個含義看上去很複雜。ide

好比包括angle漸變方向，是從上到下漸變，仍是從左向右漸變，仍是以必定角度漸變。函數

color-stop-list定義的是漸變節點。oop

咱們來看幾個例子。post

基礎框架代碼：動畫

<!DOCTYPE html>

<body>
    <div class="my-box"></div>
</body>

<style>
    .my-box {
        width: 300px;
        height: 300px;
        /* background: linear-gradient(#fb3, #58a); */
    }
</style>

</html>
複製代碼

僅使用顏色：

background: linear-gradient(#fb3, #58a);
複製代碼

效果以下：ui

指定漸變節點

以下代碼所示，咱們定義了4個漸變節點，其中第二個與第三個漸變節點的顏色相同。

background: linear-gradient(#fb3 10%, #58a 50%, #58a 60%, red 80%);
複製代碼

展現效果以下所示：

指定漸變方向

咱們添加漸變方向，先來嘗試一下角度問題：

background: linear-gradient(45deg, #fb3 10%, #58a 50%, #58a 60%, red 80%);
複製代碼

展現效果以下所示，能夠看到其中的45deg是左下角開始的。但到底是從哪裏轉動的45deg呢？

嘗試一下其餘的角度，或者咱們作一下動畫看看：

<!DOCTYPE html>

<body>
    <div class="my-box"></div>
</body>

<style>
    .my-box {
        width: 300px;
        height: 300px;
        background: linear-gradient(0deg, #fb3 10%, #58a 50%, #58a 60%, red 80%);
        animation: change 3s infinite;
    }
    @keyframes change {
        from {
            background: linear-gradient(0deg, #fb3 10%, #58a 50%, #58a 60%, red 80%);
        }
        25% {
            background: linear-gradient(11.25deg, #fb3 10%, #58a 50%, #58a 60%, red 80%);
        }
        50% {
            background: linear-gradient(22.5deg, #fb3 10%, #58a 50%, #58a 60%, red 80%);
        }
        75% {
            background: linear-gradient(33.75deg, #fb3 10%, #58a 50%, #58a 60%, red 80%);
        }
        to {
            background: linear-gradient(45deg, #fb3 10%, #58a 50%, #58a 60%, red 80%);
        }
    }
</style>

</html>
複製代碼

動畫效果以下：

能夠看到其轉換方向從是「從下到上」的方向開始，大約是以組件中心爲圓心順時針轉動45deg。

利用linear-gradient的特性能夠作不少有意思的背景色或樣式，如條紋等等。《CSS揭祕》中詳細闡述瞭如何使用該屬性作條紋以及作更復雜的背景圖案。