创建文本

首先我们先来创建文本，这里我们使用 <h1> 标签写上 “Hello World！”：

<h1 className="boujee_text">Hello World!</h1>

突出文字

为了突出我们的文字，font-size 使用 clamp 使其响应：

.boujee_text {
   font-size: clamp(3rem, 25vmin, 8rem);
}

为我们要使用的颜色创建两个自定义属性。将 linear-gradient 应用于 background 使用这些颜色并将其旋转 90 度：

.boujee_text {
   --color-one: hsl(15 90% 55%);
   --color-two: hsl(40 95% 55%);
   font-size: clamp(3rem, 25vmin, 8rem);
   background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
             ) 0 0 / 100% 100%;
     }

创建可用于水平背景大小的自定义属性。将其用于 background-size-x：

.boujee_text {
   --bg-size: 400%;
   --color-one: hsl(15 90% 55%);
   --color-two: hsl(40 95% 55%);
   font-size: clamp(3rem, 25vmin, 8rem);
   background: linear-gradient(
                 90deg,
                 var(--color-one),
                 var(--color-two),
                 var(--color-one)
             ) 0 0 / var(--bg-size) 100%;
       }

要将背景剪裁到文本，请将 color 设为: transparent 然后将 background-clip 设置为：text

.boujee_text {
   --bg-size: 400%;
   --color-one: hsl(15 90% 55%);
   --color-two: hsl(40 95% 55%);
   font-size: clamp(3rem, 25vmin, 8rem);
   background: linear-gradient(
                 90deg,
                 var(--color-one),
                 var(--color-two),
                 var(--color-one)
             ) 0 0 / var(--bg-size) 100%;
     color: transparent
     -webkit-background-clip: text;
     background-clip: text;
    }

该 background-clip 属性在某些浏览器中需要这样写： -webkit-background-clip

此时，可以在 background-position 中使用的渐变 background-image。或者，您可以在文本上设置渐变动画。首先，定义动画的关键帧。这将使用您之前定义的 --bg-size 自定义属性。范围自定义属性的好处是使您可以更轻松地进行维护。

@keyframes move-bg {
   to {
     background-position: var(--bg-size) 0;
   }
}

然后使用 animation 命令应用动画：

.boujee_text {
   --bg-size: 400%;
   --color-one: hsl(15 90% 55%);
   --color-two: hsl(40 95% 55%);
   font-size: clamp(3rem, 25vmin, 8rem);
   background: linear-gradient(
                 90deg,
                 var(--color-one),
                 var(--color-two),
                 var(--color-one)
             ) 0 0 / var(--bg-size) 100%;
     color: transparent
     -webkit-background-clip: text;
     background-clip: text;
     animation: move-bg 8s infinite linear;
    }

完毕！🎉 您已经成功创建了动画渐变文本

完整 CSS 示例如下：

.boujee_text {
   --bg-size: 400%;
   --color-one: hsl(15 90% 55%);
   --color-two: hsl(40 95% 55%);
   font-size: clamp(3rem, 25vmin, 8rem);
   background: linear-gradient(
                 90deg,
                 var(--color-one),
                 var(--color-two),
                 var(--color-one)
             ) 0 0 / var(--bg-size) 100%;
     color: transparent
     -webkit-background-clip: text;
     background-clip: text;
     animation: move-bg 8s infinite linear;
    }

@keyframes move-bg {
   to {
     background-position: var(--bg-size) 0;
    }
}

效果演示

Hello World！