用 mousemove 实时更新 box-shadow 实现鼠标跟随发光效果的核心是将鼠标坐标存为 css 自定义属性，再通过 calc() 与 var() 动态计算阴影偏移；需监听 mousemove 或 touchmove，写入 --mouse-x/--mouse-y，css 中用 calc(var(--mouse-x) - 50% * 1px) 控制偏移，并注意移动端适配与性能优化。
如何用 mousemove 实时更新 box-shadow 实现鼠标跟随发光效果
核心是把鼠标坐标转成 CSS 自定义属性，再在元素上用 calc() 和 var() 动态算阴影偏移。别直接改 style.boxShadow，性能差、难维护。
- 监听
document.addEventListener('mousemove', ...)，取e.clientX和e.clientY - 用
document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')同步写入根变量 - CSS 里写：
box-shadow: calc(var(--mouse-x) - 50% * 1px) calc(var(--mouse-y) - 50% * 1px) 30px #00f3ff;（注意单位乘法防解析错误） - 阴影中心要对准鼠标，所以减去元素自身宽高的一半；
50% * 1px是绕过 CSS 不支持50% - var(--x)的 hack
为什么 transform: translate() 不适合做发光跟随
发光是视觉层效果，不是位移。用 translate 移动整个元素会破坏布局流、触发重排，且阴影方向固定，无法模拟“光从鼠标点发散”的真实感。
-
translate改的是元素位置，box-shadow偏移才是光的方向控制 - 如果同时用
translate+box-shadow，阴影会随元素一起动，失去“鼠标是光源”的语义 - 移动端 touch 事件坐标逻辑不同，
translate方案更难适配
requestAnimationFrame 节流不加反而更卡
直接在 mousemove 里设 CSS 变量其实足够快；加 requestAnimationFrame 反而引入一帧延迟，导致发光“拖尾”明显，尤其快速移动时。
- 现代浏览器对
setProperty更新自定义属性做了优化，无需手动节流 - 只有当你在回调里做了复杂计算（比如多层阴影叠加、颜色插值）才考虑
raf - 真要节流，用
setTimeout配合clearTimeout比raf更可控，避免丢帧
移动端适配：touchmove 的坐标和触发时机差异
触摸屏没有持续的 mousemove，必须监听 touchmove 并取 e.touches[0]；而且默认会触发滚动，得加 { passive: false } 并调用 e.preventDefault()。
立即学习“前端免费学习笔记（深入）”；
-
touchmove的clientX/Y在e.touches[0]下，不是e直接属性 - 别只监听
touchmove，保留mousemove，用'ontouchstart' in window判断环境再绑定 - iOS Safari 对
box-shadow渲染有性能限制，阴影模糊值超过40px可能掉帧，建议控制在20px–30px
细节全在坐标怎么映射到阴影参数上——差一个负号、少乘个 1px、没处理 touches[0]，效果就断掉。
