结论：mask-image单独做按钮悬停流光效果差，因其仅裁切不发光；需叠加opacity动画、transform: translatez(0)或will-change: transform强制gpu加速，并配合linear-gradient光束与mask-position扫动动画才能实现真实流光效果。
直接说结论：用 mask-image 做按钮悬停流光，容易卡顿、不发光、不渐隐，纯属“伪流光”——它只裁切，不发光；想有光晕+扫过+消散感，必须叠加 opacity 动画 + transform: translateZ(0) 或 will-change: transform 强制 GPU 加速。
为什么 mask-image 单独用在按钮上会“死板”
因为 mask-image 本质是像素级裁切工具，它只决定“哪块区域显示”，对颜色、亮度、透明度完全无感。常见错误写法：
- 只写
mask-position动画，比如从0 0滑到100vw -50vh，结果是文字或按钮被“硬切”掉，像刀片划过，毫无速度感 - 用 PNG/SVG 当 mask 源，加载慢、缩放糊、hover 触发时延迟明显
- 漏掉
-webkit-mask-image前缀，Safari 下直接失效 - 没设
mask-size，导致渐变光束太细或太粗，看不出“扫过”轨迹
真正能跑通的三件套组合
不是“选一个”，而是三个层必须同时存在，缺一不可：
-
mask-image: linear-gradient(90deg, transparent, #fff, transparent)—— 光束核心，角度和色停点决定“亮区宽度”，别用纯黑/白，用带 alpha 的渐变才自然 -
animation: sweep 1.4s ease-out forwards配合@keyframes sweep { 0% { mask-position: -100% 0; } 100% { mask-position: 200% 0; } }—— 控制光束横向扫过路径，ease-out模拟初快后慢的流星惯性 -
opacity动画从0 → 1 → 0，叠加在同一个元素上，且必须加will-change: opacity, mask-position或transform: translateZ(0)，否则 Safari 和旧版 Chrome 会掉帧
button:hover 里最常漏掉的兼容性细节
悬停触发流光，不是简单加个 :hover 就完事：
-
mask-image必须写在:hover规则内（不能只写在默认状态），否则初始就渲染 mask，浪费性能 - 要显式重置
mask-composite（如mask-composite: add），避免多层 mask 叠加出意外裁切 - 如果按钮用了
background-clip: text或-webkit-text-fill-color: transparent，mask-image会作用于文字内容层，此时得把 mask 放在伪元素上，主元素只管 opacity 和 transform - Firefox 对
mask-position动画支持不稳定，建议 fallback 到background-position渐变动画（虽效果略逊，但保底可用）
性能敏感点：mask 动画卡顿的根源在哪
不是代码写错了，而是浏览器没把它当“可加速层”处理：
- 没加
will-change: mask-position时，Chrome 会把 mask 位移当作 layout 触发，每帧重排，60fps 直接崩到 20fps -
mask-size设成200% 100%比contain更稳，后者在响应式缩放时易触发重计算 - 避免在
mask-image里嵌套url()+linear-gradient()混用，部分 Edge 版本会拒绝解析 - 真机调试时发现卡顿？大概率是没开硬件加速——加一句
transform: translateZ(0)到 hover 状态，比任何优化都管用
复杂点不在写几行 CSS，而在于理解 mask 是“裁刀”，不是“光源”。所有光感、速度感、衰减感，都得靠别的属性补足；最容易被忽略的，是那个看似无关的 will-change 声明——它不改变视觉，但决定了动画是否真能“流”起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
