纯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揭秘》中详细阐述了如何使用该属性作条纹以及作更复杂的背景图案。