使用纯CSS实现动态渐变文本特效
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
如图所示，这是一个炫酷的文本渐变效果，如同冰岛的极光一般。本次的文章让我们逐步分解代码，了解其实现原理。
基于以上动图效果可以分析以下是本次动效实现的主要几点：
- 文本中有多个颜色的动画
- 每个颜色显示的半径不同，有大有小
- 整体动画是有规律的重复进行着
实现过程
接下来开始正式的代码实现过程，通过以上可以分析出会有多个元素来实现颜色的动画，每个元素的动画轨迹和运行速度不一致，但当多个不同颜色的元素和文本结合起来就会产生一种很美丽的效果，这里的动画元素和文本结合是用了一个很重要的属性，混合模式 mix-blend-mode，对于混合模式文本不做详细介绍，这是一个很强大的属性，有兴趣的可以了解看看。
CSS中的mix-blend-mode属性用于控制元素在叠加到其他元素时的混合模式。它可以应用于具有背景色或背景图片的元素，以改变其与父元素或其他元素的混合方式。它可以创建各种视觉效果和创意设计。
布局&样式
html部分比较简单，只需要一个标题和多个动画承载.aurora__item的元素，代码如下。
<h1 class="title">CSS文本渐变特效
<div class="aurora">
<div class="aurora__item"></div>
<div class="aurora__item"></div>
<div class="aurora__item"></div>
<div class="aurora__item"></div>
</div>
</h1>CSS部分的内容首先是变量部分，为了后期更好的调整相关参数和值的复用我们定义一部分变量可供后续轻松自定义特效：
:root {
--bg: #000000;
--clr-1: #00c2ff;
--clr-2: #33ff8c;
--clr-3: #ffc640;
--clr-4: #e54cff;
--blur: 1rem;
--fs: clamp(3rem, 8vw, 7rem);
--ls: clamp(-1.75px, -0.25vw, -3.5px);
}这些变量定义了背景颜色--bg和四种不同的颜色--clr-1、--clr-2、--clr-3、--clr-4用于极光特效。其他变量控制模糊程度--blur、字体大小--fs和字间距--ls。
.title设置了标题的字体大小、字体粗细和字间距。它还设置了背景颜色，并创建了一个相对定位的上下文，用于后续的极光特效。
.title {
font-size: var(--fs);
font-weight: 800;
letter-spacing: var(--ls);
position: relative;
overflow: hidden;
background: var(--bg);
margin: 0;
color: #fff;
}.aurora元素在.title元素内部绝对定位，并覆盖了整个区域。它设置了较高的z-index，以确保它显示在文本上方。mix-blend-mode: darken（选择两个颜色中较暗的部分作为混合结果）属性用于将极光特效的颜色与背景混合。
.aurora {
position: absolute;
z-index: 2;
mix-blend-mode: darken;
}aurora__item表示极光特效的每个单独形状。它在aurora元素内部绝对定位，并具有60vw（视口宽度的60%）的宽度和高度。每个形状具有不同的背景颜色和边框半径，创建了独特的形状。filter: blur()属性为每个形状添加了模糊效果：
.aurora__item {
overflow: hidden;
position: absolute;
width: 60vw;
height: 60vw;
background-color: var(--clr-1);
border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
filter: blur(var(--blur));
}此时的效果如下，因为.aurora设置了较高的z-index，所以文本被遮挡下颜色块的下方。
此时再增加混合模式mix-blend-mode: overlay（通过叠加元素和其父元素或其他元素的颜色，产生一种混合效果）将形状与背景混合。因为父级设置mix-blend-mode: darken（选择两个颜色中较暗的部分作为混合结果），且.title的字体颜色设置#fff白色，所以较暗的部分就是我们的aurora__item元素，此时的效果如下：
动画实现
基于以上的效果进一步增加动画的效果，让这个字体的渐变效果更加有冲击感，使用CSS关键帧创建了极光特效。创建了四个关键帧动画（aurora-1、aurora-2、aurora-3、aurora-4）定义了每个形状的移动分别对应每个aurora__item。
.aurora__item:nth-of-type(1) {
top: -50%;
animation: aurora-1 12s ease-in-out infinite alternate;
}每个关键帧动画使用百分比值指定形状的初始和最终位置。例如aurora-1将形状从右上角移动到左上角，然后返回。其他关键帧动画为其他形状定义了类似的移动效果。
@keyframes aurora-1 {
0% {
top: 0;
right: 0;
}
50% {
top: 100%;
right: 75%;
}
75% {
top: 100%;
right: 25%;
}
100% {
top: 0;
right: 0;
}
}基于移动的动画再增加一个元素边框半径变化的动画，创建aurora-border关键帧动画随时间改变了每个形状的边框半径，创建了动态效果。边框半径值在不同的百分比上定义，使不同的元素之间的动画平滑过渡。
@keyframes aurora-border {
0% {
border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
}
25% {
border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
}
50% {
border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
}
75% {
border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
}
100% {
border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
}
}此时就完成了整个文本渐变的动画效果，最后的效果图如下所示：
在线预览
最后
本文解析了通过纯 CSS 实现了一个如同冰岛的极光一般炫酷的文本渐变效果。通过定位和多个具有不同颜色和边框半径值形状的动画，结合mix-blend-mode混合模式实现了这个特效，并定义了CSS变量可以轻松自定义特效。
只需要修改CSS变量部分就可以自定义不同的文本渐变效果，有兴趣的朋友可以尝试看看~
以上就是使用纯CSS实现动态渐变文本特效的详细内容，更多关于CSS动态渐变文本特效的资料请关注程序员之家其它相关文章！
相关文章
这篇文章主要介绍了css实现动态阴影、蚀刻文本、渐变文本效果，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-22
这篇文章主要介绍了CSS Tips：段落每行渐变色文本效果的实现方法,需要的朋友可以参考下2018-03-07- 下面小编就为大家带来一篇css渐变色彩 省略标记 嵌入字体 文本阴影全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-05
- 注:本文由 Robin 翻译自 webdesignerwall(这个标题不知道该怎么翻译好, 希望大家能提提意见.) 你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的cs2008-10-17
这篇文章给大家介绍了如何使用使用CSS写一个带追踪特效的渐变按钮，文中有详细的代码示例供大家参考，具有一定的参考价值，感兴趣的小伙伴跟着小编一起来看看吧2023-10-30
要在文本中实现渐变色效果，我们可以使用CSS中的background-clip属性和CSS渐变来实现,本文给大家分享一个代码示例，展示如何创建文本渐变色效果，感兴趣的同学可以自己动手2023-10-16
这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果，有没有发现在现如今的网站应用中，我们大量的使用到这类场景,在解决这类问题时，我们利用了css的mask与mask-comp2023-10-12- 在前端开发中，为网页添加动态效果可以提升用户体验,本文将介绍如何使用 CSS 实现动态流光线条效果和颜色渐变效果，为你的网页增添炫目的视觉效果,感兴趣的同学可以自己动2023-09-12
传统的灰色纯色边框你是不是觉得太难看了？你是否想设计一些精美的边框，例如渐变、圆角、彩色的边框？那你来对地方了，本文将介绍如何用纯CSS就能实现具有渐变和圆角的彩2023-02-25CSS实现渐变色边框(Gradient borders)的5种方法
给 border 设置渐变色是很常见的效果，实现这个效果有很多思路，本文主要介绍了CSS实现渐变色边框的5种方法，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感2022-03-22
最新评论