background-position 动画比 transition background 更可靠，因 background-image 不可过渡，浏览器常静默忽略 transition: background，而 background-position 通过拖动大渐变图实现平滑动画，需配合 background-size ≥200%×200% 及百分比定位。
background-position 动画为什么比 transition background 更可靠
因为 background-image 本身不是可过渡属性，写 transition: background 在大多数浏览器里会被静默忽略——尤其三色以上渐变时，直接跳变，毫无流动感。真正能平滑动画的是 background-position，它相当于“拖动一张大渐变图”，只要图够大（靠 background-size 拉伸），位移就自然流畅。
必须同时设置 background-size: 300% 300%（至少 200% × 200%），否则 background-position 移动范围不足，动画卡在边缘；渐变角度和位移方向要匹配：水平流动用 linear-gradient(90deg, ...) + background-position: 0% 50% → 100% 50%；别用 right 或 center 这类关键字值，不同浏览器解析不一致；坚持用百分比，比如 100% 50%。
伪元素流光层怎么避免撕裂和错位
单独一层 ::before 模拟流光，比只动背景更灵活，但极易因定位或变形出错。核心是让“光条”斜切后刚好横跨按钮，且进出时无缝：
-
::before设为position: absolute，宽高100%，起始left: -100% - 用
transform: skewX(-25deg)切出约 45° 光条，角度太大易穿出，太小像拖影 - 渐变定义为
linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent)，中间透亮、两边透明，避免硬边 - 动画关键帧里
left从-100%到100%，并在60%停留再走完，防止回弹突兀 - 如果按钮用了
border-radius，伪元素也要同步设相同值，否则圆角处会漏光
移动端点击无反馈？先查这三件事
很多“流光按钮点不动”问题其实和动画无关，而是基础交互被压制：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 漏掉
touch-action: manipulation—— iOS Safari 和部分安卓 WebView 默认压制快速点击反馈，没它，:active态根本不出 - 按钮视觉尺寸
36px，但点击热区未扩到48px × 48px，违反 WCAG 触摸靶区规范，用户不是手抖，是真点不中 - 用了
position: fixed却没处理软键盘弹出场景：iOS 键盘收起后，按钮常卡在错误 Y 坐标，甚至被遮住
发光效果别堆 box-shadow，用 filter + 伪元素更可控
堆 3–4 层 box-shadow 模拟辉光，会导致低端 Android 设备掉帧；真正轻量的方案是分层控制：
- 主体按钮用
filter: blur(8px)+opacity: 0.7生成基础光晕 - 再套一层
::after做径向渐变扩散，动画只驱动transform: scale()和opacity - 务必加
will-change: transform，但仅在:hover状态下启用，避免常驻开销 - 所有发光层的
z-index要严格错开，否则伪元素会遮盖文字或点击区域 - 伪元素不能简单设
width: 100%; height: 100%，必须略大于容器并用负偏移“撑开”，否则光晕被裁剪
颜色适配性最容易被忽略：同一套发光参数，在黑色背景上炫酷，在白色背景上可能完全不可见。上线前务必在 background-color: #fff 和 background-color: #000 下分别测试 box-shadow 的 rgba 值和模糊半径。
