前言
上一次给大家带来一个个彩色的相关效果，这次又是和彩色相关，带着大家实现一个彩色字的CSS特效，也十分简单，话不多说，我们直接进入实现环节。
效果预览
这是一个由HTML和CSS组合而成的霓虹风格的文字效果。
HTML部分
首先看到HTML部分，相关代码如下。
<figure class="neon">
<p class="text" data-text="thanks">thanks</p>
<div class="gradient"></div>
<div class="spotlight"></div>
</figure>
这里创建了一个包含文本效果的容器，其中包括了文字、渐变效果和聚光灯效果。
figure.neon表示这个<figure>元素有一个neon类，它作为整个霓虹效果的主要容器。
p.text表示这个<p>元素包含了显示的文字内容 "thanks"。这个元素带有text类。此外，data-text属性被用来存储文本内容，供CSS中的伪元素使用。
div.gradient表示这个<div>元素是用来创建文本周围的渐变效果的，通过这个元素，为文本添加了一个霓虹般的背景色。
div.spotlight表示
这个<div>元素生成了一个视觉上的聚光灯效果。它设置了一个白色到黑色的径向渐变，然后通过动画使其产生类似于聚光灯的视觉效果。这是通过对元素的位置和混合模式的应用来实现的。
CSS 部分
以上那些HTML元素结合在一起，通过CSS的样式定义，可以创造了一个非常炫目的霓虹灯风格的文本效果。
首先看到第一段CSS样式，相关CSS代码如下。
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.neon {
position: relative;
overflow: hidden;
user-select: none;
}
body用来设置整体页面的样式，在此设置了页面的排版和背景颜色。.neon可以设置文字效果外层容器的样式，包括相对定位和禁止选择。.text则是设置文字的样式，包括颜色、大小、加粗、字体、转换大小写、边距、亮度和背景色。.text::before表示使用伪元素添加了应用于文字背后的模糊效果和混合模式。.gradient则是创建了一个渐变背景效果并应用了混合模式。.spotlight则是创建了一个聚光灯效果，使用了径向渐变和动画效果。
这些样式可以确保页面内容处于屏幕的中央位置，并创建了一个相对定位的父容器以及一些用户选择的禁止。
.text {
color: white;
font-size: 150px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
margin: 0;
filter: brightness(2);
background-color: black;
}
.text::before {
content: attr(data-text);
position: absolute;
filter: blur(3px);
mix-blend-mode: difference;
}
这段 CSS 代码定义了一个带有特殊效果的文本样式。让我逐行解释：
.text
color: white;：将文本颜色设置为白色。font-size: 150px;：设置字体大小为 150 像素。font-weight: bold;：将字体加粗。font-family: sans-serif;：使用无衬线字体。text-transform: uppercase;：将文本转换为大写字母形式。margin: 0;：消除了文本的默认外边距。filter: brightness(2);：通过应用亮度滤镜使文本明亮化。background-color: black;：设置了文本的背景颜色为黑色。
.text::before
content: attr(data-text);：使用attr(data-text)属性的值来生成伪元素的内容，也就是在HTML代码中的data-text的值。这个属性的值将会被显示在text的上层。position: absolute;：将伪元素设置为绝对定位，使其相对于文本控件定位。filter: blur(3px);：通过模糊滤镜产生文本背后的虚化效果。mix-blend-mode: difference;：通过混合模式，使文本效果与其背景产生特殊的视觉效果。
.gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
mix-blend-mode: multiply;
}
这段 CSS 代码定义了一个名为 .gradient 的元素样式，创建了一个渐变背景并应用了混合模式。
.gradient
position: absolute;：将元素设置为绝对定位，使其相对于其最近的非静态父元素进行定位。top: 0; left: 0; right: 0; bottom: 0;：这些设置将元素的位置定位在其容器的上、左、右和下边缘。这样设置，使得渐变背景会填充整个容器。background: linear-gradient(45deg, red, gold, lightgreen, gold, red);：创建了一个45度角度的线性渐变，从红色到金色，再到浅绿色，再到金色，最后到红色。这个渐变将作为背景应用到元素上。mix-blend-mode: multiply;：设置了混合模式为"multiply"。这意味着元素将以一种乘法混合模式与其背后的内容相混合，产生一种特殊的叠加视觉效果。
.spotlight {
position: absolute;
top: -200%;
left: -100%;
right: -100%;
bottom: -200%;
background: radial-gradient(circle, white, black 25%) center / 5% 5%;
transform: rotate(45deg);
mix-blend-mode: color-dodge;
animation: light 10s linear infinite;
}
@keyframes light {
to {
transform: translate(25%, 25%);
}
}
这段CSS代码定义了一个名为 .spotlight 的元素样式, 并创建了一个光点效果。
.spotlight
position: absolute;：将元素设置为绝对定位，使其相对于其最近的非静态父元素进行定位。top: -200%; left: -100%; right: -100%; bottom: -200%;：这些值将元素的位置移动到其容器的外部，实际上隐藏了这个元素。background: radial-gradient(circle, white, black 25%) center / 5% 5%;：创建了一个径向渐变，从白色渐变到黑色，这作为创建光点的基础效果。transform: rotate(45deg);：将光点进行旋转，使其在页面上产生一个特殊的角度。mix-blend-mode: color-dodge;：设置了混合模式为 "color-dodge"，这种混合模式产生了一种以颜色减淡作用的效果。animation: light 10s linear infinite;：应用了名为light的动画。这个动画在10秒内线性地移动元素，从而产生了光点移动的效果。
@keyframes light
to：定义了动画的最终状态，这里通过transform属性使光点移动到新的位置（translate），从而产生动画中光点在页面上移动的效果。
总结
以上就是整个效果的实现过程了，纯 CSS 实现，代码简单易懂。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~
