最简跟随光标需用mousemove+transform实现，关键在滞后偏移营造视觉跟随感；必须用translate避免重排，加pointer-events:none防遮挡；移动端需适配touchmove并处理层叠上下文。
直接用 mousemove + transform 实现最简跟随
不用框架、不依赖库，三行 JS 就能跑起来。关键不是“追鼠标”，而是让元素位置滞后一点，才有视觉跟随感。
-
clientX/clientY是视口坐标，滚动时依然准，不用减window.scrollY - 必须用
transform: translate()，避免触发重排；left/top在高频移动下明显卡顿 - 元素要加
pointer-events: none，否则会挡住按钮点击和文字选中 - 示例代码里把偏移量设为
-8，是因为假设跟随元素是 16×16px，让中心对齐鼠标点
<div id="cursor" style="position: fixed; width: 16px; height: 16px; background: #007bff; border-radius: 50%; pointer-events: none; z-index: 9999;"></div>
<script>
const cursor = document.getElementById('cursor');
document.addEventListener('mousemove', e => {
cursor.style.transform = `translate(${e.clientX - 8}px, ${e.clientY - 8}px)`;
});
</script>加缓动让移动更自然，别用 setTimeout 节流
生硬跳变是新手最常踩的坑。靠插值（lerp）+ requestAnimationFrame 才能顺滑，且不丢帧。
- 插值系数建议从
0.12开始调：小于0.05拖尾太长，大于0.2几乎无延迟，失去“跟随”感 - 不要用
setTimeout或setInterval控制频率——它们和屏幕刷新率不同步，容易撕裂 - 缓动变量（
tx/ty）必须初始化，否则首次渲染会闪一下 - 如果页面有 iframe 或嵌套滚动容器，
mousemove默认只在主文档生效，需额外监听目标区域
移动端没 mousemove，得单独处理 touchmove
手指划屏时，mousemove 完全不触发。不加适配，特效在手机上就是摆设。
-
touchmove的事件对象没有clientX，要用e.touches[0].clientX - 一个 touch 事件可能带多个触点，只取第一个（
[0]）就够用 - 记得同时监听
touchstart和touchend，控制显隐逻辑，避免手指抬起后光标悬停 - iOS Safari 对
pointer-events: none支持不稳定，某些场景下仍会拦截点击，可加style="all: unset"强制重置
z-index 和层叠上下文容易被忽略
光标明明写对了，却总被导航栏、弹窗或 fixed 元素盖住——大概率是层叠上下文搞的鬼。
立即学习“前端免费学习笔记（深入）”；
-
z-index只对定位元素（position: relative/absolute/fixed）生效，普通 div 设了也没用 - 父元素用了
transform、opacity或filter，会创建新层叠上下文，导致子元素的z-index相对父级生效，而非全局 - 保险做法：给跟随元素设
position: fixed+z-index: 9999，并确保其父级没意外创建隔离上下文 - 调试时右键检查元素，看 computed 样式里
stacking context是否异常多
实际项目里，最难调的往往不是坐标计算，而是层叠顺序和移动端兼容性。这两个点不提前想清楚，上线后用户一反馈，就得翻半天 DOM 结构。
