文字扫光：让一条亮带扫过字形

标题、按钮、loading 文案上那种「一道高光缓缓划过文字」的效果，拆开看只有两件事：把渐变灌进字形（background-clip: text，详见 CSS Background 系列的「灌进字形」一节），再让这张渐变横向平移。本页把它做成可调参数的现场 demo，并对照分析一个流行的 React 实现 gradient-shimmer 的三处关键设计：对称亮带渐变、随字号自适应的亮带宽度、以及为什么用 Web Animations API 而非纯 @keyframes 来驱动。

1 · 一行话的本质

文字本身用 -webkit-text-fill-color: transparent 镂空成「透明字」，底下铺一张比文字宽得多的渐变，background-clip: text 把这张渐变裁进字形轮廓——于是看见的「字色」其实是渐变。再用动画把 background-position 从最左推到最右，渐变里那条亮带就扫过了每个字：

.shimmer {
  background-image: linear-gradient(105deg, 底色, …亮带…, 底色);
  background-size: 比文字宽很多 px  100%;     /* 留出滑动空间 */
  -webkit-background-clip: text;  background-clip: text;
  -webkit-text-fill-color: transparent;        /* 字镂空, 露出渐变 */
}
/* 把背景从左滑到右, 亮带就扫过每个字 */
@keyframes shimmer { to { background-position: 100% center; } }

2 · 现场效果

拖动下面的参数，实时看亮带如何变化；下方的代码面板是当前这一帧真正生效的 CSS 与 WAAPI 调用。这个 demo 也接入了「滚出视口自动暂停」：把它滚出屏幕动画会冻结，滚回来再继续。

3 · 关键一：渐变不是两色渐变，是一条对称亮带

若只是 $linear-gradient(底色 \to 亮色)$，扫过去会像「半边亮半边暗」地推移，不像一道划过的高光。gradient-shimmer 的渐变以中点 50% 对称：两端是底色，正中嵌入你给的多个色标（stops），并在两侧用 color-mix(in oklab, 底色 42%, 边色) 做柔和过渡，形成一条有宽度、两头淡出的亮带：

linear-gradient(105deg,
  底色                                   calc(50% - var(--gs-spread)),      /* 左侧纯底色 */
  color-mix(in oklab, 底色 42%, 首色)     calc(50% - var(--gs-spread-mid)),  /* 淡入 */
  …各 stop: 色 calc(50% + var(--gs-spread-mid) * k)…                        /* 亮带主体 */
  color-mix(in oklab, 底色 42%, 末色)     calc(50% + var(--gs-spread-mid)),  /* 淡出 */
  底色                                   calc(50% + var(--gs-spread)))      /* 右侧纯底色 */

4 · 关键二：亮带宽度随字数与字号自适应

一句短词和一整行长句，若用同样的像素亮带，观感的「扫光节奏」会完全不同。所以 spread 不是固定像素，而是按内容算出来、并随 font-size 缩放，再封一个上限：

const fontScale = 当前 fontSize / 14;
const spreadPx  = Math.min(字符数 * spread * fontScale, 48 * fontScale);  // 有上限
const bgWidth   = 元素宽度 + spreadPx * 2;        // 背景比文字宽这么多
el.style.backgroundSize = `${bgWidth}px 100%`;
el.style.setProperty('--gs-spread',     `${spreadPx}px`);
el.style.setProperty('--gs-spread-mid', `${spreadPx * 0.72}px`);
// 平移区间: 从背景完全在左侧外, 滑到完全在右侧外
const start = -spreadPx - bgWidth / 2;
const end   = 元素宽度 + spreadPx - bgWidth / 2;   // 平移量恰好 = bgWidth, 扫满一趟

5 · 关键三：为什么用 WAAPI，而不是纯 @keyframes

既然每次都要 JS 测量、写 background-size 和几何，索性连动画也交给 element.animate()（Web Animations API）。它比纯 CSS 多给三样能力：