

动态渐变文字

码途钥匙

2025-06-24

· 点击蓝字，关注我们

效果图

一、HTML：搭建渐变文字的「舞台框架」

就像话剧需要舞台布景，HTML 在这里搭好了展示文字的基础结构 —— 用<article>标签包裹标题和说明文字，就像给渐变效果准备了一个展示框。两行标题（英文和中文）和一行技术说明，就像舞台上的主角和配角，按顺序排列等待灯光（CSS）的照射。关键逻辑：HTML 不关心文字怎么变颜色，只负责把「动态渐变文字」这几个字放在页面中央，就像剧院把海报挂在显眼位置，具体的光影效果交给后续技术处理。

二、CSS：给文字穿上「变色外衣」

这部分是渐变效果的核心，相当于给文字穿上会变色的魔法外套：

定义颜色变量：用@property声明两个颜色变量，像给调色盘预设两种基础色（青蓝和紫粉），浏览器会记住它们并支持动画变化；

动画驱动变色：@keyframes规定颜色变化的「剧本」——2 秒内从青蓝渐变为蓝紫，再从紫粉变回青蓝，循环播放；

渐变与渲染：linear-gradient用 OKLCH 色彩空间调配更鲜艳的渐变（类似画家混合颜料），再通过background-clip:text把渐变色「裁剪」到文字轮廓内，最后用color:transparent隐藏文字原色，让渐变背景透过文字显示。

现代 CSS 技巧：OKLCH 空间比传统 RGB 更符合人眼对色彩亮度的感知，所以渐变过渡更自然，就像彩虹的色带不会有生硬断层。

三、JavaScript：赋予互动「魔法开关」

虽然代码中没写 JS，但它能让渐变效果更灵活：

手动控制变色：点击文字时用 JS 修改 CSS 变量，让渐变从自动循环变成「点击换色」；

动态生成效果：通过 JS 获取用户输入的文字，自动为新文字添加渐变动画，就像魔术师根据观众指令变换戏法；

设备适配：检测屏幕尺寸后用 JS 调整渐变速度，比如手机端让动画变慢更省电。

完整代码

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <title>动态渐变文字</title>    <meta name="viewport" content="width=device-width, initial-scale=1" />    <style>      /*   these type the CSS variable as color  unlocking the ability for the browser   to animate just that portion*/      @property --＠color-1 {        syntax: "<color>";        inherits: false;        initial-value: hsl(98 100% 62%);      }      @property --＠color-2 {        syntax: "<color>";        inherits: false;        initial-value: hsl(204 100% 59%);      }      /* keyframes that change the color variable */      @-webkit-keyframes gradient-change {        to {          --＠color-1: hsl(210 100% 59%);          --＠color-2: hsl(310 100% 59%);        }      }      @keyframes gradient-change {        to {          --＠color-1: hsl(210 100% 59%);          --＠color-2: hsl(310 100% 59%);        }      }      article {        /* apply variable changes over time */        -webkit-animation: gradient-change 2s linear infinite alternate;        animation: gradient-change 2s linear infinite alternate;        background: linear-gradient(          /*       in oklch produces more vibrant gradient results       learn more https://developer.chrome.com/docs/css-ui/access-colors-spaces#color_interpolation    */            to right in oklch,          /* use the variables in a gradient (or wherever!) */ var(--＠color-1),          var(--＠color-2)        );        /* old browser support */        -webkit-background-clip: text;        -webkit-text-fill-color: transparent;        /* modern browser version */        background-clip: text;        color: transparent;      }      @layer demo.support {        h1 {          font-size: 10vmin;          line-height: 1.1;        }        body {          background: hsl(204 100% 5%);          min-block-size: 100%;          box-sizing: border-box;          display: grid;          place-content: center;          font-family: system-ui, sans-serif;          font-size: min(200%, 4vmin);          padding: 5vmin;        }        h1,        p,        body {          margin: 0;          text-wrap: balance;        }        h1 {          line-height: 1.25cap;        }        p {          font-family: "Dank Mono", ui-monospace, monospace;        }        html {          block-size: 100%;        }        article {          display: grid;          gap: 1lh;          text-align: center;        }      }    </style>  </head>  <body>    <article>      <h1>Animated Gradient Text</h1>      <h1>动态渐变文字</h1>      <p>@property + linear-gradient() + background-clip + text-fill-color</p>    </article>  </body></html>