纯CSS动态渐变文本特效

news2024/11/25 11:47:45

如图所示，这是一个炫酷的文本渐变效果，如同冰岛的极光一般。本次的文章让我们逐步分解代码，了解其实现原理。

基于以上动图效果可以分析以下是本次动效实现的主要几点：

文本中有多个颜色的动画
每个颜色显示的半径不同，有大有小
整体动画是有规律的重复进行着

实现过程

接下来开始正式的代码实现过程，通过以上可以分析出会有多个元素来实现颜色的动画，每个元素的动画轨迹和运行速度不一致，但当多个不同颜色的元素和文本结合起来就会产生一种很美丽的效果，这里的动画元素和文本结合是用了一个很重要的属性，混合模式 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%;
    }
}