文字填充动画（渐变扫过方向可控 CSS 源码）

效果演示（真实可交互）

下方深色舞台上有一行大字「粤喵组件站 YUEMIU」，默认呈暗灰色。把鼠标移上去，一道白色光带会沿所选方向扫过文字，把笔画「点亮」。下拉框可以切换左→右、右→左、上→下、对角四种填充方向；勾选「自动循环填充」后光带会来回扫动，不需要悬停也能持续展示。配合方向切换，可以组合出横幅滚动、屏幕点亮等多种标题动效。

完整代码

HTML 结构：一行文字配一个控制面板：

<p class="tf" id="tfText">粤喵组件站 YUEMIU</p>
<select id="tfDir">
  <option value="lr">左 → 右</option>
  <option value="tb">上 → 下</option>
  <option value="diag">对角</option>
</select>
<input type="checkbox" id="tfLoop" /> 自动循环填充

核心 CSS：background-clip: text 把渐变裁进字形，background-size: 200% 把渐变拉宽一倍，再通过 background-position 的过渡让光带移动：

.tf {
  color: transparent;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #5b6478 0%, #5b6478 42%, #ffffff 50%, #5b6478 58%, #5b6478 100%);
  background-size: 200% 100%;
  background-position: 100% 0;   /* 未填充：光带藏在左缘 */
  transition: background-position .9s cubic-bezier(.4, 0, .2, 1);
}
.tf.filled { background-position: 0 0; }  /* 填充：光带扫到右缘 */

上下、对角方向只需要改渐变角度与 background-size 的第二个值，四种方向的默认/填充位置在组件里已逐一配好。自动循环则用 CSS 变量驱动关键帧：

.tf.auto { animation: tfAuto 2.4s ease-in-out infinite alternate; }
@keyframes tfAuto {
  0%   { background-position: var(--tf-a); }
  100% { background-position: var(--tf-b); }
}

参数说明

兼容性与性能

• background-clip: text 需要 -webkit- 前缀，Chrome / Safari / Edge / Firefox 均支持，IE 不支持
• 降级方案：在 @supports 之外给文字保留实色 color，不支持渐变裁切的浏览器直接显示纯色
• 动画只驱动 background-position，属于绘制层变更，单行大字性能无忧；多行建议用循环模式减少重复层
• 自动循环模式用 CSS 变量切换方向，切换瞬间会重启动画，避免方向残留

常见问题

Q: 光带扫过时文字有残影？ 把渐变两端的暗色改为与背景一致的颜色（或透明），同时避免在渐变中途使用半透明色。

Q: 想让填充速度更快？ 悬停过渡改 .4s，循环周期改 1.4s 即可；注意两处是独立参数。

Q: 可以填充图片纹理吗？ 可以，把 background-image 换成任意图片 URL，同样支持 background-position 位移，效果类似鎏金扫光。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。