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

题外话

前段时间被人挂到首页，说说我的看法。我是属于不卷，躺平的，对于结构源码这些不感兴趣。由于我是文科出身，做开发，更多的精力放在了实践业务与用户体会上，结构啥的，够用就行，顺手就行。当然我也承受咱们讨论和辩驳。

尽管我就一普通人，没大厂经历，不过也做了六年全栈开发了。我的技能面很广，当然这个“广”不是指通晓了多少前端结构源码。

前期学过 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 、 甚至网络架起，弱电装置与工程布线，我都整过。

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

不过常识面广也并不是啥好事。比方在前端领域不行深入，不行通晓，这也是我一个很大的缺陷。

正文

彩虹突变

CSS 原理

要完成这个作用，需求运用 background 特点的 linear-gradient 函数。

linear-gradient() 函数用于创立一个表明两种或多种色彩线性突变的图片。创立一个线性突变，需求指定两种色彩，还能够完成不同方向（指定为一个视点）的突变作用，如果不指定方向，默认从上到下突变。

先来看看该特点的作用：

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

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

彩虹色

原理知晓后，咱们界说一组彩虹色（在此运用 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%
);

现在的作用就挺美观，有那味了：

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

让它动起来

静态作用必定不行完美，于是运用 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);
    }
}

当然，也能够用平移而并非滤镜去做这个作用。可是通过这个滤镜做出来的动画，我感觉看上去更柔软，更舒畅。

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

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>

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

运用彩虹突变

将上述彩虹突变色运用到该文字的 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%
);

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

再加上动画作用，就非常美观了：

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

有一点要注意的是，终究代码运用的是 -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>