流动渐变文字

一道暖色渐变缓缓流过标题文字，让标题在不移动的情况下保持一点生气。

CSS
文字
循环
收录于 2026-10-29

为动而生

AI 提示词

用纯 CSS 制作渐变在文字中流动的标题。背景设为 90deg 的 linear-gradient，包含四个色标，并在末尾重复第一个颜色（主色、暖黄色、浅色文字色、主色），background-size 设为 300% 100%，用 background-clip: text 和 color: transparent 把渐变裁切到文字上。用 6s linear infinite 把 background-position 从 0% 动到 300%，让循环无缝衔接。使用粗体展示字体，让渐变有足够的面积显现。在 prefers-reduced-motion 下让渐变保持静止。文字为“为动而生”。

源代码

Demo.tsx

'use client'

import s from './demo.module.css'

export default function GradientText({ labels }: { labels: Record<string, string> }) {
  return <p className={s.text}>{labels.text}</p>
}

demo.module.css

.text {
  margin: 0;
  font: 700 clamp(2rem, 7vw, 2.75rem) / 1.1 var(--font-display);
  letter-spacing: -0.02em;
  background-image: linear-gradient(90deg, var(--stage-accent), oklch(86% 0.13 85), var(--stage-ink), var(--stage-accent));
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: flow 6s linear infinite;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .text { animation: none; }
}