transition无法实现鼠标跟随光晕，因其仅响应属性的起点到终点变化，而鼠标位置连续高频更新会导致卡顿或跳变；真正需用mousemove事件动态更新CSS变量，并通过radial-gradient(circle at var(--mouse-x) var(--mouse-y))实时绑定光晕位置。
为什么直接用 transition 做不了鼠标跟随光晕？
因为 transition 只能响应属性的「起点→终点」变化，而鼠标位置是连续高频更新的（每毫秒都可能变），靠它驱动 box-shadow 或 background 会卡顿、跳变，甚至完全不响应。真正要的是「实时绑定」——把鼠标坐标映射成 CSS 变量值，再让样式即时响应这个变量。
如何用 mousemove 动态更新 :root 的 CSS 变量？
核心是监听 document 的 mousemove 事件，把 event.clientX 和 event.clientY 写入 --mouse-x、--mouse-y。注意两点：
- 必须用
document.documentElement.style.setProperty()，不能用document.body—— 否则在滚动页面时坐标会错位 - 别在每次事件里重复调用
getBoundingClientRect()，纯坐标就够了，除非你要做视口内相对定位 - 加个
requestAnimationFrame节流更稳，尤其在高刷屏上，避免过度触发重绘
document.addEventListener('mousemove', e => {
requestAnimationFrame(() => {
document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});
});
radial-gradient 光晕怎么用 CSS 变量精确定位？
关键不是靠 background-position，而是把变量直接塞进 radial-gradient 的圆心参数里。浏览器支持用 calc() 混合单位，但要注意：CSS 变量本身不带单位，所以定义时就得带 px，使用时不能再加单位，否则语法错误。
- 写法必须是：
background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.2) 0%, transparent 50%) - 如果光晕太刺眼，改
rgba()的 alpha 值比调opacity更安全——后者会影响子元素 - 想让光晕随容器缩放，得用
background-size: 200px 200px配合background-repeat: no-repeat，否则默认铺满整个背景
移动端触摸事件怎么兼容？
iOS Safari 和安卓 Chrome 对 touchmove 的处理和 mousemove 不同：默认不触发，且多点触控时 touches[0] 才是主指针。漏掉这点，手机上光晕就完全不动。
立即学习“前端免费学习笔记（深入）”；
- 监听
touchmove时，必须用e.touches[0]取坐标，不能用e.changedTouches[0] - 要同时监听
mousemove和touchmove，但别让两者重复触发——加个布尔锁或用if ('ontouchstart' in window)分支 - 移动端需加
meta viewport并设user-scalable=no，否则双指缩放会干扰坐标计算
radial-gradient 中圆心坐标的单位一致性——变量里存了 px，CSS 里就不能再写 px，否则解析失败；还有 touch 设备上没做 preventDefault() 导致页面意外滚动，光晕就飘走了。 
