微光文字（扫光鎏金主题可控 CSS 源码）

效果演示（真实可交互）

下方「微光文字 SHIMMER」的字形内有一道高光从左到右不断扫过，像金属表面反射光线。下拉框可以切换银白、鎏金、彩虹三套主题：银白是低调的冷光，鎏金模拟金箔反光，彩虹则是连续渐变的彩色流动；拖动「速度」滑块可以在 1s 到 6s 之间调整扫光周期，扫得越快高光越急促、越有能量感。

完整代码

HTML 结构：一行文字 + 主题下拉与速度滑块：

<p class="sh-text" id="shText">微光文字 SHIMMER</p>
<select id="shTheme">
  <option value="silver">银白</option>
  <option value="gold">鎏金</option>
  <option value="rainbow">彩虹</option>
</select>
<input id="shSpeed" type="range" min="1" max="6" step="0.2" value="2.4" />

核心 CSS：渐变裁进字形，background-size: 200% 后通过 background-position 循环扫动：

.sh-text {
  color: transparent;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(110deg, #5b6478 0%, #5b6478 40%, #ffffff 50%, #5b6478 60%, #5b6478 100%);
  background-size: 200% 100%;
  animation: shSlide var(--sh-dur, 2.4s) linear infinite;
}
@keyframes shSlide {
  0%   { background-position: var(--sh-from, 200% 0); }
  100% { background-position: var(--sh-to, -200% 0); }
}

原生 JS：切换主题时替换渐变并更新扫动区间，滑块实时修改周期变量：

themeSel.addEventListener('change', () => {
  text.className = 'sh-text theme-' + themeSel.value;
  if (themeSel.value === 'rainbow') {
    text.style.setProperty('--sh-from', '0 0');
    text.style.setProperty('--sh-to', '200% 0');
  } else {
    text.style.setProperty('--sh-from', '200% 0');
    text.style.setProperty('--sh-to', '-200% 0');
  }
});
speed.addEventListener('input', () => {
  text.style.setProperty('--sh-dur', speed.value + 's');
});

参数说明

兼容性与性能

• 与文字填充动画同源，background-clip: text 加 -webkit- 前缀全现代浏览器支持，IE 不支持
• 循环扫光驱动 background-position，属绘制属性；建议单页控制在 3–4 处，避免大面积重绘
• 彩虹主题渐变两端颜色一致，配合背景平铺扫动衔接无缝，不会出现跳色
• 已适配 prefers-reduced-motion：系统开启减弱动态时停止扫光，显示静态高光

常见问题

Q: 扫光在 Safari 上有锯齿？ Safari 对 background-clip: text 与 text-fill-color 组合偶有渲染瑕疵，可尝试把渐变两端改为纯透明（rgba(255,255,255,0)）并配合 -webkit-text-stroke 描边掩盖。

Q: 想让扫光只发生一次而不是循环？ 把 animation-iteration-count 改为 1 即可，并去掉 background-position 的往返区间。

Q: 金色不够「贵」？ 鎏金质感的关键是明暗对比：暗部用深金棕（如 #7a5a1e），亮部用亮金（如 #ffd76b），再叠一层 text-shadow 淡金光晕。

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