聚光灯效果的核心原理是用半透明遮罩层覆盖容器，并在鼠标位置动态创建圆形透明区域；需通过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 嵌套时，坐标系换算很容易漏掉一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
