CSS如何实现鼠标追踪聚光灯效果_基于CSS变量与JS位移

聚光灯效果的核心原理是用半透明遮罩层覆盖容器，并在鼠标位置动态创建圆形透明区域；需通过JS实时更新CSS变量（--x、--y），再结合radial-gradient或mask生成亮区，且遮罩层须绝对定位并置于内容上方。

聚光灯效果的核心原理是什么

聚光灯效果本质是用一个半透明遮罩层覆盖整个容器，再在鼠标位置“挖”出一个圆形透明区域。CSS 本身不能直接响应鼠标坐标做动态裁剪，所以必须靠 JS 实时更新 CSS 变量（如 --x、--y），再用 radial-gradient 或 mask 基于这些变量生成中心亮区。

关键点在于：遮罩层必须是绝对定位的伪元素或额外元素，且层级高于内容；CSS 变量需设为 :root 或容器级作用域，确保能被 background 或 mask 函数读取。

用 radial-gradient + CSS 变量实现兼容方案

这是目前兼容性最好（支持 Chrome 48+、Firefox 42+、Safari 12.1+）的做法，不依赖 mask，适合需要 IE11 以外主流浏览器支持的项目。

• 遮罩层使用 background，值为：radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent 100px, rgba(0,0,0,0.7) 100px)
• --x 和 --y 必须带单位（如 px），否则计算会失败；JS 更新时建议统一用 px，避免混用 % 和 px 导致偏移
• 圆形半径（如 100px）建议写死，动态改半径会触发频繁重绘，影响性能
• 容器需设 overflow: hidden，防止渐变溢出边界

document.addEventListener('mousemove', e => {  const rect = e.currentTarget.getBoundingClientRect();  const x = e.clientX - rect.left;  const y = e.clientY - rect.top;  e.currentTarget.style.setProperty('--x', `${x}px`);  e.currentTarget.style.setProperty('--y', `${y}px`);});

用 mask + radial-gradient 实现更精准控制

mask 方案能实现硬边/羽化/多层叠加等高级效果，但 Safari 对 mask 的单位支持较怪（比如不支持 px 在 radial-gradient 中直接写），推荐统一用 % 并配合 mask-size: 200% 200% 扩大画布。

立即学习“前端免费学习笔记（深入）”；

• 必须设置 -webkit-mask 和 mask 双属性，Safari 仅认前者
• mask-position 不能直接绑定变量，得把位移逻辑写进 radial-gradient 的 at 位置里
• 示例 mask 值：radial-gradient(circle at calc(var(--x, 50%) - 50%) calc(var(--y, 50%) - 50%), black 0, transparent 100%)，注意这里要手动减去 50% 抵消默认居中

容易踩的坑：Chrome 115+ 开始对 mask 中的 CSS 变量更新有延迟，建议加 will-change: mask 强制图层提升。

为什么鼠标移动会抖动或延迟

这不是 CSS 问题，而是 JS 绑定和渲染节奏不匹配导致的。

• 不要用 mousemove 原生事件高频触发 setProperty，必须节流（requestAnimationFrame 最稳妥）
• 不要对 body 或 document 绑定，而应绑定到目标容器，否则鼠标在容器外时变量仍被更新，造成错位
• 如果容器有滚动或缩放（transform: scale()），JS 获取的 clientX/Y 需按比例换算，否则聚光灯会漂移
• 某些 CSS 框架（如 Tailwind）可能重置 user-select: none，导致鼠标在元素上失焦，记得显式加 user-select: none 到遮罩层

聚光灯真正难的不是“怎么亮起来”，而是“怎么稳又准地跟住鼠标”，尤其是容器存在 transform、scroll、iframe 嵌套时，坐标系换算很容易漏掉一层。