应使用 mask-image + background-position 动画实现跨浏览器流光文字，因 mask-position 动画在 firefox 中完全不支持，chrome/safari 115+/16.4+ 虽支持但需严格满足 svg 配置或 png alpha 条件，极易静默失效；核心是用渐变遮罩配合 background-position 位移驱动，文字设 color: transparent 和 background-clip: text，并确保 display、background 声明和渐变单位正确。
直接用 mask-image + background-position 动画，别碰 mask-position —— 它在 Firefox 里根本不动，Chrome/Safari 115+/16.4+ 才刚支持，且极易因 SVG 配置或 PNG alpha 缺失而静默失效。
为什么 mask-position 动画大概率白写
你写了 transition: mask-position 0.5s 却没任何变化，不是代码错，是浏览器根本不认这个过渡。旧版 CSS Masking 规范明确将 mask-position 列为 non-animatable 属性；直到 2023 年新规范才改为可动画，但实现严重滞后：
- Firefox 至今（2026年10月）仍完全不支持
mask-position动画 - Chrome 115+ 和 Safari 16.4+ 虽支持，但前提是遮罩源是
mask-image（非url(#svg-mask)），且 SVG 内部必须设maskUnits="userSpaceOnUse"、mask-type: luminance - 用 PNG 做遮罩时，若未启用 alpha 通道或未声明
-webkit-mask-type: luminance，位移也会“动了但看不见”
真正能跨浏览器跑通的流光文字方案
核心思路：把“光斑”变成一个横向流动的渐变遮罩，靠 background-position 驱动（它天然支持 transition 和 @keyframes），再用 mask-image 把这个背景“刻”到文字上。
- 文字本身设
color: transparent+background-clip: text+-webkit-background-clip: text - 遮罩层用
mask-image: linear-gradient(to right, transparent 40%, black 60%, transparent 80%)—— 中间黑区是“不透光”的光斑本体，两侧透明用于软边过渡 - 必须加
mask-size: 200% 100%，否则光斑太窄，一动就滑出文字范围 - 动画只改
background-position: -100% 0, 100% 0，配合transition: background-position 1.2s linear infinite - Safari 必须用
-webkit-mask-image，且渐变终点必须写transparent，不能写rgba(0,0,0,0)
关键代码片段（含兼容写法）
h1 {
color: transparent;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #44b3a6);
-webkit-background-clip: text;
background-clip: text;
/* 流光遮罩 */
-webkit-mask-image: linear-gradient(to right, transparent 40%, black 60%, transparent 80%);
mask-image: linear-gradient(to right, transparent 40%, black 60%, transparent 80%);
-webkit-mask-size: 200% 100%;
mask-size: 200% 100%;
-webkit-mask-position: 0 0;
mask-position: 0 0;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: background-position 1.2s linear infinite;
}
h1:hover {
background-position: 100% 0, -100% 0;
}
容易被忽略的三个硬性前提
哪怕代码全对，漏掉以下任一，流光就会消失或卡死：
- 元素必须是
display: block或inline-block——inline元素不支持background-clip: text -
background-image不能简写成background，Safari 会直接跳过渐变声明 - 渐变角度单位（如
90deg）不能加引号，否则编译或解析时整条声明被丢弃
实际项目中，建议用 @supports (mask-image: linear-gradient()) 包一层降级：不支持时 fallback 到纯色文字或 opacity 动画。流光效果本质是视觉欺骗，控制好遮罩尺寸、位置和背景流动节奏，比追求“标准写法”更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
