用 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()
。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
touchmove
的
clientX/Y
在
e.touches[0]
下，不是
e
直接属性
别只监听
touchmove
，保留
mousemove
，用
'ontouchstart' in window
判断环境再绑定
iOS Safari 对
box-shadow
渲染有性能限制，阴影模糊值超过
40px
可能掉帧，建议控制在
20px–30px
细节全在坐标怎么映射到阴影参数上——差一个负号、少乘个
1px
、没处理
touches[0]
，效果就断掉。
