cursor: url() 不适合动态跟随效果，因其仅支持静态图片且无法响应鼠标实时位置、缩放、滚动等交互；必须用绝对定位 DOM 元素 + mousemove + requestAnimationFrame 模拟，并处理坐标偏移与性能优化。
为什么 cursor: url() 不适合做动态跟随效果
直接用 CSS 的 cursor: url() 只能指定静态图片，无法响应鼠标实时位置、缩放、滚动或页面交互（比如悬停按钮时换图标）。它本质是系统级光标替换，坐标由浏览器底层控制，你拿不到、也改不了它的偏移逻辑。想让“自定义光标”精准贴着鼠标指针移动，必须放弃 cursor 属性，改用一个绝对定位的 DOM 元素模拟。
用 position: absolute 元素 + mousemove 实现跟随
核心思路：创建一个 <div id="custom-cursor"></div>，初始设为 position: absolute; pointer-events: none;，再监听 mousemove 事件，把 event.clientX 和 event.clientY 赋给它的 left 和 top。注意以下几点：
-
pointer-events: none必须加，否则会拦截底层鼠标事件，导致按钮点不中、hover 失效 - 坐标要减去元素自身宽高的一半（比如光标是 24×24 的圆点），否则默认左上角对齐，看起来总在鼠标右下偏移
- 如果页面有横向滚动条，
clientX仍有效；但若容器设置了transform: scale()或zoom，需额外修正坐标（见下一点）
滚动/缩放/嵌套容器下坐标偏移怎么修
当页面存在 window.scrollX/Y、transform: scale(0.8) 或光标容器被包在 position: relative 的父级里时，仅靠 clientX/clientY 会错位。此时需分层计算：
- 基础坐标 =
event.clientX + window.scrollX（处理横向滚动） - 缩放修正：若外层有
scale(s)，则真实 left =(clientX + scrollX - offsetX) / s + container.offsetLeft，其中offsetX是光标元素自身水平偏移量（如宽的一半） - 最稳妥做法：用
element.getBoundingClientRect()获取目标容器视口位置，再结合event.clientX/Y做相对计算，避免嵌套 offset 累积误差
简单场景下，直接用 document.documentElement.scrollTop 补全 vertical 偏移就够了；复杂布局建议封装一个 getRealPosition(event, targetContainer) 工具函数。
立即学习“前端免费学习笔记（深入）”；
性能关键：节流 + requestAnimationFrame
高频 mousemove 直接改 style.left/top 容易掉帧，尤其在低配设备上。不要用 setTimeout 节流到 16ms——它和屏幕刷新不同步。正确做法：
- 监听
mousemove，只更新两个变量：latestX和latestY - 用
requestAnimationFrame驱动一次 DOM 更新，读取最新坐标并设置style.transform = translate(${x}px, ${y}px) - 优先用
transform而非left/top，触发合成层，避免 layout 回流
如果还要加淡入/拖尾/旋转等动效，直接在 transform 里叠加 rotate() 或用 will-change: transform 提前提示浏览器。
真正难的不是定位，而是各种上下文干扰：iframe 跨域限制、移动端 touchmove 坐标差异、CSS contain: paint 截断渲染、甚至某些浏览器对 pointer-events: none 在 fixed 元素上的兼容性 bug。上线前务必在 iOS Safari 和 Chrome Android 上实测滚动+缩放组合场景。
