CSS 快速提示！渐变文本动画

让我们使用限定范围的自定义属性和背景剪辑来制作动画渐变文本效果

Jhey Tompkins

前往 CodePen 并创建一个新的 Pen。

为文本创建标记。我们使用包含“Speedy”一词的标题：

<h1 class="boujee-text">Hello!</h1>

然后，为 body 设置较深的 background-color：

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

提高文本上的 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;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

如需进一步优化，您可以将动画代码封装在媒体查询中，以尊重用户的动作偏好设置：

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

完成！🎉? 您已经使用限定范围的自定义属性和 background-clip 通过 CSS 创建了一些动画渐变文本。

下面是此提示的视频版本，快来了解吧！⚡️

您是否更希望以推文形式提供此信息？🐦

祝您一切顺利！ʕ •ᴥ•ʔ

主打图片：Vladislav Klapin 在 Unsplash 上发布的图片