核心是用 requestanimationframe 节流 mousemove，将 clientx/y 减去 container.getboundingclientrect() 偏移转为 --x/--y 变量；css 中需用 calc(var(--x) * 1px) 驱动 transform；移动端应检测触屏并绑定 touchmove，注意缩放、图层和坐标系对齐。
用 mousemove 监听坐标并更新 --x / --y 变量
核心是把鼠标位置转成 CSS 自定义属性，再让元素用 calc() 或 transform 读取。监听 mousemove 时别直接改 style.setProperty 太频繁——浏览器重绘跟不上，会卡顿。
- 用
requestAnimationFrame节流：只在下一帧更新变量，不丢帧也不积压 -
clientX/clientY是视口坐标，如果容器有滚动或缩放，得先减去getBoundingClientRect()的偏移 - 别用
pageX—— 它含滚动距离，和 CSS 布局坐标系不一致，动画会漂移
document.addEventListener('mousemove', e => {
requestAnimationFrame(() => {
const rect = container.getBoundingClientRect();
document.documentElement.style.setProperty('--x', e.clientX - rect.left);
document.documentElement.style.setProperty('--y', e.clientY - rect.top);
});
});
CSS 里用 var(--x) 驱动 transform 动画
直接写 transform: translate(var(--x), var(--y)) 会报错——var() 不能单独当数值用，必须配合单位或函数包裹。
- 正确写法是
transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) - 如果想做“跟随但带惯性”，用
transition: transform 0.2s ease-out，但注意：过渡只对数值变化生效，calc()里变量变，整个表达式才算变 - 别在
:hover里覆盖这些变量——它和 JS 设置的变量层级冲突，优先级难控
为什么 will-change: transform 有时没用
加了 will-change 却没提升，大概率是因为浏览器没真正触发硬件加速，或者变量更新太碎导致图层反复重建。
- 只对持续高频变化的元素加，比如一个固定定位的浮动小球；对全屏监听但只偶尔动一下的元素加，反而增加内存开销
- 确保该元素没有
opacity、filter等触发新图层的属性干扰（它们会和transform图层打架） - Chrome DevTools 的 “Layers” 面板能看是否真生成了独立合成图层——没生成就白加
移动端 touchmove 怎么兼容
手机上 mousemove 不触发，必须切到 touchmove，但它的 touches[0] 坐标是相对于视口的，和桌面端逻辑一致，只是事件名和取值路径不同。
- 别同时监听两个事件——
touchmove在 iOS Safari 会默认阻止mousemove，但 Android 某些浏览器又不会，行为不统一 - 推荐用特性检测：
'ontouchstart' in window判断是否触屏设备，然后只绑对应事件 -
touchmove默认会触发页面滚动，记得加e.preventDefault()，但只在你需要精确坐标的区域里加，避免锁死正常滚动
真实项目里最常漏的是坐标系对齐——比如容器用了 transform: scale(0.8)，但 JS 还按原始尺寸算 clientX，结果动画抖三抖。这种时候得把缩放因子也提成 CSS 变量，让 calc() 一起参与运算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
