聚光灯效果需用transition配合transform实现平滑焦点移动，核心是通过clip-path或mask创建可过渡的圆形窗口，用transform: translate()而非top/left移动以避免重排，确保单位一致且初始状态显式声明。
transition 怎么配合 transform 实现聚光灯焦点移动
聚光灯效果本质是让某个区域“亮”，其余“暗”，靠的是遮罩层 + 局部透明。纯 CSS 做不到动态发光，但能用 clip-path 或 mask 切出一个可过渡的圆形“窗口”，再用 transition 控制它的位置和大小。transform（尤其是 translate()）比直接改 top/left 更适合过渡——它触发合成层，不触发重排，动画更顺。
- 必须用
transform: translate(x, y)移动遮罩，别用top+left，否则卡顿明显 -
clip-path: circle(50px at 100px 100px)中的坐标支持百分比或像素，但过渡时需保证单位一致（比如都用px，或都用%），混用会中断动画 - 如果容器宽高不固定，优先用
%配合transform: translate(-50%, -50%)定位中心，避免计算绝对偏移
mask-image + linear-gradient 能否用 transition 平滑过渡
可以，但有硬限制：mask-image 本身不能被过渡，真正能过渡的是 mask-position 和 mask-size。所以聚光灯的“移动”要靠改 mask-position，“缩放”靠改 mask-size，而 mask-image 得写成带透明渐变的 radial-gradient。
- 推荐写法：
mask-image: radial-gradient(circle, black 0%, transparent 70%)；黑区不透，透明区透，形成柔边光斑 -
mask-position必须设为px或%，不能是center这类关键字，否则无法过渡 - Firefox 对
mask的 transition 支持较晚（v96+），旧版会直接跳变，需要加-webkit-mask兼容
hover 触发聚光灯时，为什么鼠标移入瞬间闪烁或错位
常见于用 :hover 直接控制 mask-position 或 clip-path，但初始状态没设好，导致浏览器渲染第一帧时取值异常。根源是：没声明默认态，或用了不支持过渡的初始值（比如 mask-position: center）。
- 务必在非 hover 状态下显式写全默认值，例如：
mask-position: 50% 50%，而不是留空或写center - 如果用
clip-path，初始值不能是none，得设一个可见的圆，比如clip-path: circle(0px at 50% 50%)，再过渡到大圆 - 遮罩元素的
pointer-events要设为none，否则它会拦截鼠标事件，导致 hover 失效或触发两次
移动端 touch 事件下 transition 不生效或延迟
不是 transition 本身问题，而是 iOS Safari 对非 transform/opacity 属性的过渡做了降级处理，且 touch 事件默认有 300ms 延迟。另外，mask 在部分安卓 WebView 里渲染不稳定。
立即学习“前端免费学习笔记（深入）”；
- 强制开启硬件加速：
transform: translateZ(0)加在遮罩层上，哪怕只是占位 - 用
touchstart替代hover触发 class 切换（配合 JS），避开伪类延迟 - 真机测试时优先用
clip-path方案，兼容性比mask高，iOS 15.4+ 已支持过渡
