CSS鼠标跟随发光动画_通过动态变量控制定位与阴影

用 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]，效果就断掉。