纯 css 无法实现真正跟随鼠标的聚光灯效果，必须靠 js 实时更新坐标变量并动态设置 radial-gradient 圆心或 mask-position，否则仅为静态假象；需用 clientx/y 结合 getboundingclientrect 计算容器内百分比坐标，注意移动端 touchmove、单位转换、mask 三要素及 pointer-events: none 等细节。
纯 CSS 无法实现真正跟随鼠标的聚光灯效果，必须靠 JS 实时更新坐标变量，再由 CSS 解析为径向渐变或遮罩位置；否则你看到的只是静态偏移、hover 假象，或者根本不动。
radial-gradient() 圆心位置怎么用 CSS 变量动态设置
不能直接写 radial-gradient(circle at var(--x) var(--y), ...)——CSS 函数体内不解析变量值，浏览器会忽略整个声明。必须用 JS 动态拼接字符串写入 style.backgroundImage，或用 calc() + 内联样式绕过限制。
- 最稳方案：监听
mousemove，用e.clientX / rect.width * 100 + '%'算出容器内横向百分比，同理算--y，再通过element.style.backgroundImage = `radial-gradient(circle at ${x}% ${y}%, ...)`覆盖 - 避免用
pageX/pageY：它们含滚动偏移，会导致聚光灯在滚动后“掉出”可视区 - 移动端必须同时监听
touchmove，并从e.touches[0]取坐标，否则手指一动就失效 - 单位混用会错位：
var(--x)是数字，calc(var(--x) * 1px)才能转成像素；百分比则统一用%，别掺px
mask-image 方案里 mask-position 为什么总卡在左上角
常见错误是只写了 mask-image: radial-gradient(...)，但漏了三要素：mask-size、mask-repeat: no-repeat、mask-position: var(--x) var(--y)。缺任一，光斑就不可见或铺满全屏。
-
mask-size必须显式设（如200px 200px），否则默认拉伸到容器尺寸，圆形光斑被撑变形 -
mask-repeat: no-repeat不加的话，遮罩会平铺，出现多个“光洞” - CSS 变量需提前在
:root或目标元素上声明初始值，例如:root { --x: 50%; --y: 50%; }，否则计算结果为NaN，mask-position失效 - 渐变本身要软边：用
radial-gradient(circle at var(--x) var(--y), #fff, transparent 70%)，透明过渡段越长，发光感越自然
伪元素实现聚光灯层时为什么鼠标事件失灵
因为没加 pointer-events: none，导致伪元素挡住了底层交互。这不是样式问题，是事件捕获链断裂。
- 聚光灯层必须用
::before或::after，content: ""+position: fixed（全屏）或absolute（容器内），不能新增 DOM 元素 -
z-index要高于内容但低于可点击控件（比如按钮），否则点不到 - 若父容器有
transform或filter，fixed定位会被截断，此时改用absolute并确保父级position: relative -
mix-blend-mode: exclusion或screen可让渐变只“透亮”，但 Safari 在某些嵌套结构下渲染异常，建议加@supports检测
滚动和缩放场景下光斑漂移的根本原因
不是 JS 监听错了，而是坐标归一化逻辑没对齐容器上下文。clientX/clientY 是视口坐标，但渐变中心需要的是相对于目标容器的相对位置。
- 必须用
getBoundingClientRect()算出鼠标在容器内的偏移比例，而不是直接用clientX - 容器若有
transform: scale(1.2)，坐标要除以该系数，否则光斑移动速度会加快 - iOS Safari 在惯性滚动中可能丢
touchmove，建议监听document而非具体容器，并 fallback 到scroll+rAF补帧 - 最易被忽略的是：渐变半径（如
160px）和容器宽高的比例关系。这个值得在 devtools 里反复调，凭感觉设出来的，90% 都发虚或太窄
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
