题外话

前段时间被人挂到首页，说说我的看法。我是属于不卷，躺平的，对于框架源码这些不感兴趣。因为我是文科出身，做开发，更多的精力放在了实际业务与用户体验上，框架啥的，够用就行，顺手就行。当然我也接受大家讨论和反驳。

虽然我就一普通人，没大厂经验，不过也做了六年全栈开发了。我的技术面很广，当然这个“广”不是指精通了多少前端框架源码。

早期学过 C++ 和 C# ，在大学和第一份工作的前几个月做桌面端，然后技术栈主要就切换到 Java 和 Angular 了。 Java 方面，从纯 Servlet 到 Struts2 , 再就是 Spring MVC 和 SpringBoot，以及 SpringCloud 微服务。 Angular 从版本4一直用到现在，因为我觉得很方便，省去了自己整合生态和各种配置，就一直用到现在了。然后再是 React ，小程序我都是用它做。 Vue 也自己学了，学着玩玩，不同的框架互相比较，同时也帮我身边刚入行的朋友填填坑。

其他冷门的技术也有研究。可以看我的个人 git ，Crimson (CrimsonHu) - Gitee.com。我的开源项目有 900+ star 了，不过今年下半年比较忙没怎么更新，这个是打算明年继续更新维护的。我很喜欢的一个桌面端技术， Java Swing GUI ，很冷门，但是我玩的很熟练。同时和它相关的， CEF 嵌入式谷歌内核，我觉得也挺有意思。

然后再是一些杂七杂八的技术。比如攒机、服务器 Linux 、甚至网络架设，弱电安装与工程布线，我都整过。

不过知识面广也并不是啥好事。比如在前端领域不够深入，不够精通，这也是我一个很大的缺点。

正文

彩虹渐变

CSS 原理

要实现这个效果，需要使用 background 属性的 linear-gradient 函数。

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

先来看看该属性的效果：

background: linear-gradient(red, yellow, blue);

彩虹色

原理知晓后，我们定义一组彩虹色（在此使用 antd 提供的默认颜色，更加符合视觉审美）：

--antd-dust-red: #f5222d;
--antd-volcano: #fa541c;
--antd-sunset-orange: #fa8c16;
--antd-calendula-gold: #faad14;
--antd-sunrise-yellow: #fadb14;
--antd-lime: #a0d911;
--antd-polar-green: #52c41a;
--antd-cyan: #13c2c2;
--antd-daybreak-blue: #1890ff;
--antd-geek-blue: #2f54eb;
--antd-golden-purple: #722ed1;
--antd-magenta: #eb2f96;

定义好颜色后，按照彩虹顺序进行排列，并且 linear-gradient 函数可以指定角度：

background: linear-gradient(
    135deg,
    var(--antd-dust-red) 0%,
    var(--antd-volcano) 8.33%,
    var(--antd-sunset-orange) 16.667%,
    var(--antd-calendula-gold) 25%,
    var(--antd-sunrise-yellow) 33.333%,
    var(--antd-lime) 41.667%,
    var(--antd-polar-green) 50%,
    var(--antd-cyan) 58.333%,
    var(--antd-daybreak-blue) 66.667%,
    var(--antd-geek-blue) 75%,
    var(--antd-golden-purple) 83.333%,
    var(--antd-magenta) 91.666%,
    var(--antd-dust-red) 100%
);

现在的效果就挺好看，有那味了：

让它动起来

静态效果肯定不够完美，于是使用 css 动画，让彩虹动起来：

在此需要使用 css 滤镜的 hue-rotate(deg) 函数：

调整元素的色相角度，没有最大值。每 360deg 一个变化周期

详细讲述这个函数肯定是晦涩难懂的。不如直接看看效果。将它应用到 css keyframes ：

animation: aurora 3s ease 0s infinite normal none running;

@keyframes aurora {
    0% {
        filter: hue-rotate(360deg);
    }

    100% {
        filter: hue-rotate(0deg);
    }
}

当然，也可以用平移而并非滤镜去做这个效果。但是通过这个滤镜做出来的动画，我感觉看上去更柔和，更舒服。

GIF 比较模糊，实际效果会更好。

文字背景

CSS 原理

要给文字使用渐变色背景，当然仅靠 color 属性就不能实现了。需使用如下方法：

-webkit-background-clip: text

以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

-webkit-text-fill-color: transparent

去掉文字的默认颜色，将其设置为透明。

-webkit-box-decoration-break: clone

用于控制在一个盒子模型的边框和背景上应用装饰（如阴影、边框、背景图像等）时，如何处理盒子在其内部内容周围的区域。 clone 值表示在视觉上克隆一份装饰，并将其应用到被截断的盒子的两个部分上，从而实现更好的视觉效果。该属性目前只有 WebKit 浏览器（例如 Safari 和 Chrome）支持。

background: linear-gradient()

将上述处理后的文字背景设置为渐变色。

使用上述 css 属性后，文字渐变色的效果就实现了：

-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
-webkit-box-decoration-break: clone !important;
background: linear-gradient(red, yellow, blue);

<span class="text">你好，掘金</span>
<br />
<span class="text">Hello, juejin</span>
<br />
<span class="text">こんにちは、ほりかね</span>

应用彩虹渐变

将上述彩虹渐变色应用到该文字的 css 中，效果就非常好看了：

-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
-webkit-box-decoration-break: clone !important;
font-weight: bolder;
background: -webkit-linear-gradient(
    135deg,
    var(--antd-dust-red) 0%,
    var(--antd-volcano) 8.33%,
    var(--antd-sunset-orange) 16.667%,
    var(--antd-calendula-gold) 25%,
    var(--antd-sunrise-yellow) 33.333%,
    var(--antd-lime) 41.667%,
    var(--antd-polar-green) 50%,
    var(--antd-cyan) 58.333%,
    var(--antd-daybreak-blue) 66.667%,
    var(--antd-geek-blue) 75%,
    var(--antd-golden-purple) 83.333%,
    var(--antd-magenta) 91.666%,
    var(--antd-dust-red) 100%
);

再加上动画效果，就非常好看了：

有一点要注意的是，最终代码使用的是 -webkit-linear-gradient 函数。经过我测试发现 linear-gradient 可能会出现兼容性问题，故需要使用 -webkit-linear-gradient 。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text {
            --antd-dust-red: #f5222d;
            --antd-volcano: #fa541c;
            --antd-sunset-orange: #fa8c16;
            --antd-calendula-gold: #faad14;
            --antd-sunrise-yellow: #fadb14;
            --antd-lime: #a0d911;
            --antd-polar-green: #52c41a;
            --antd-cyan: #13c2c2;
            --antd-daybreak-blue: #1890ff;
            --antd-geek-blue: #2f54eb;
            --antd-golden-purple: #722ed1;
            --antd-magenta: #eb2f96;

            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            -webkit-box-decoration-break: clone !important;
            font-weight: bolder;
            font-size: 28px;
            background: -webkit-linear-gradient(
                135deg,
                var(--antd-dust-red) 0%,
                var(--antd-volcano) 8.33%,
                var(--antd-sunset-orange) 16.667%,
                var(--antd-calendula-gold) 25%,
                var(--antd-sunrise-yellow) 33.333%,
                var(--antd-lime) 41.667%,
                var(--antd-polar-green) 50%,
                var(--antd-cyan) 58.333%,
                var(--antd-daybreak-blue) 66.667%,
                var(--antd-geek-blue) 75%,
                var(--antd-golden-purple) 83.333%,
                var(--antd-magenta) 91.666%,
                var(--antd-dust-red) 100%
            );
            animation: aurora 3s ease 0s infinite normal none running;
        }

        @keyframes aurora {
            0% {
                -webkit-filter: hue-rotate(360deg);
                filter: hue-rotate(360deg);
            }

            100% {
                -webkit-filter: hue-rotate(0deg);
                filter: hue-rotate(0deg);
            }
        }
    </style>
</head>

<body>
    <span class="text">你好，掘金</span>
    <br />
    <span class="text">Hello, juejin</span>
    <br />
    <span class="text">こんにちは、ほりかね</span>
</body>

</html>

我的文字自带RGB，五分钟教你学会

题外话

正文

彩虹渐变

CSS 原理

彩虹色

让它动起来

文字背景

CSS 原理

应用彩虹渐变

完整代码