document.addeventlistener('mousemove', e => { document.documentelement.style.setproperty('--x', e.clientx + 'px'); document.documentelement.style.setproperty('--y', e.clienty + 'px'); }); 监听鼠标移动并同步更新根元素css变量--x和--y，使用clientx/clienty确保视口坐标精准，避免body导致滚动偏移，纯变量赋值无重排，性能最优。
直接用 mousemove 事件更新 CSS 自定义属性即可，不需要框架或额外库，但要注意坐标系转换和性能陷阱。
如何用 document.addEventListener('mousemove') 同步更新 --x 和 --y
核心是监听鼠标移动，把 event.clientX 和 event.clientY 赋给根元素（:root）的 CSS 变量。注意：必须用 document.documentElement.style.setProperty()，不能写成 document.body——否则在滚动页面时坐标会偏移。
-
clientX/clientY是视口坐标，适合做“跟随光标”效果；若需文档坐标（如固定定位元素），改用pageX/pageY，但要手动减去window.scrollX/Y - 避免在每次
mousemove中调用getBoundingClientRect()或查询 DOM——纯设变量不触发重排，性能好 - 示例代码：
document.addEventListener('mousemove', e => { document.documentElement.style.setProperty('--x', e.clientX + 'px'); document.documentElement.style.setProperty('--y', e.clientY + 'px'); });
为什么 transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) 会错位
因为 calc() 中混用单位（px 和 %）会导致计算失败，CSS 解析器直接丢弃整条声明。自定义变量存的是带单位的字符串（比如 "123px"），不能直接参与百分比运算。
- 正确做法：统一用
px，再用transform: translate(var(--x), var(--y))，然后配合position: fixed或absolute定位 - 若真需要居中对齐光标（比如一个圆形指针），先设元素
width/height固定，再用transform: translate(calc(var(--x) - 20px), calc(var(--y) - 20px))（假设宽高各 40px） - 别在
calc()里写var(--x) - 50%——语法非法，浏览器控制台会报Invalid property value
移动端和 Safari 的兼容性问题怎么处理
iOS Safari 不支持在 mousemove 中持续触发（尤其非触摸区域），且部分旧版 Safari 对 setProperty() 更新 CSS 变量有延迟。这不是 bug，是设计限制。
- 移动端优先监听
touchmove，并用e.touches[0]取坐标；同时保留mousemove供桌面端使用 - 不要依赖
requestAnimationFrame包裹 setProperty——它反而增加延迟；CSS 变量更新本身是异步但足够快 - Safari 14.5+ 已修复大部分变量响应问题，但低于此版本建议加降级：用
element.style.left = x + 'px'直接设内联样式（仅当必要时）
真正难的不是写这十几行 JS，而是想清楚你要的是「相对于视口」还是「相对于文档」的坐标，以及是否要兼容手指滑动时的抖动。变量更新本身没坑，坑都在坐标语义和设备行为差异上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
