应监听 mousemove 或 touchmove（依设备能力探测），将归一化坐标存入 :root 的 CSS 变量（如 --mouse-x-pct），CSS 中用 background-position: var(--mouse-x-pct)% var(--mouse-y-pct)% 或 transform: translate(var(--mouse-x), var(--mouse-y)) 实现平滑响应，注意单位一致、防抖及移动端 preventDefault。
怎么用 document.addEventListener('mousemove') 实时更新 CSS 变量
核心是把鼠标坐标存进 :root 的 CSS 自定义属性，让 CSS 能“看到”它。JS 只负责写，CSS 负责读和响应，分工明确。
常见错误是直接在元素上设 style.setProperty，结果变量只对那个元素生效，没法被后代或伪元素复用；必须写到 :root 才全局可用。
- 监听
mousemove时记得用throttle（比如 60fps 限频），否则频繁触发会卡顿 - 坐标建议用
event.clientX/event.clientY，不是pageX—— 后者受滚动影响，容易在滚动后偏移 - 写入前做边界检查：比如
Math.max(0, Math.min(window.innerWidth, x))，避免负值或超窗导致计算异常
document.addEventListener('mousemove', e => {
document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px');
document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px');
});
background-position 怎么跟着鼠标动但不跳变
直接写 background-position: var(--mouse-x) var(--mouse-y) 看似合理，但实际会抖动甚至翻转——因为背景图默认以左上为原点，而鼠标坐标是绝对像素值，没做归一化或锚点对齐。
真正稳定的做法是把坐标转成百分比，并配合 background-size 和 background-repeat 控制行为。
立即学习“前端免费学习笔记（深入）”；
- 用
calc((var(--mouse-x) / 100%) * 100)这类写法不可行——CSS 不支持在 calc 里用 % 做除法运算 - 稳妥方案：JS 算好百分比（
e.clientX / window.innerWidth * 100），再存为--mouse-x-pct，CSS 里直接用background-position: var(--mouse-x-pct)% var(--mouse-y-pct)% - 必须设
background-size: 200% 200%或更大，否则小图拉伸后坐标映射失真
为什么 ::before 里用 transform: translate() 比直接改 left/top 更稳
用 left: var(--mouse-x) 配合 position: absolute 看似简单，但会触发 layout，频繁重排影响性能；而且一旦父容器有 transform 或 overflow:hidden，坐标就错乱。
transform: translate() 是合成层操作，不触发重排，坐标也始终相对于自身，兼容性好（现代浏览器全支持）。
- 别写
translate(var(--mouse-x), var(--mouse-y))—— CSS 不支持在 transform 里混用单位和无单位值，必须确保变量带单位（如'px'） - 如果想限制移动范围（比如只在容器内浮动），JS 端就要提前算好最大偏移量，再写进变量，CSS 不做条件判断
- 注意
transform默认以元素中心为原点，若要以左上对齐，得加transform-origin: 0 0
移动端 touchmove 怎么和 mousemove 共存不冲突
单纯监听 touchmove 并覆盖 mousemove，会导致桌面端失效；反过来则移动端没响应。不能靠 UA 判断，得用事件能力探测。
关键点在于：移动端 touch 事件坐标字段不同（e.touches[0].clientX），且默认会触发 click 延迟，需 e.preventDefault() 抑制。
- 不要同时监听两个事件然后手动合并——会产生重复触发和坐标抖动
- 推荐策略：先检测
'ontouchstart' in window，是则只绑touchmove，否则绑mousemove - touch 事件里取坐标必须用
e.touches[0]，不是e.changedTouches[0]—— 后者只包含本次变化的触点，可能为空 - PC 浏览器开发者工具模拟 touch 时，
clientX/Y可能返回 0，建议加 fallback：优先用touches，降级用clientX
事情说清了就结束。最常漏的是移动端 touch 的坐标来源和 preventDefault，一漏就动不了；还有就是变量单位不一致导致 transform 失效，查起来特别费时间。
