纯CSS无法实现真正鼠标跟随，必须用JavaScript监听mousemove事件获取坐标，结合transform平滑移动元素，并推荐使用requestAnimationFrame优化性能。
怎么用 CSS 实现轻量级鼠标跟随效果
纯 CSS 方案只能做基础位移跟随（比如悬停时元素微移），无法实现真正“跟随鼠标坐标”的动画。如果你要的是鼠标移动时一个元素实时贴着指针走，JavaScript 是绕不开的——CSS 没有访问 clientX/clientY 的能力。
但可以结合 CSS 做平滑过渡：给跟随元素加 transition: transform 0.1s ease-out，避免生硬跳变；同时用 pointer-events: none 防止它遮挡底层交互。
用 addEventListener('mousemove') 绑定鼠标位置
核心是监听 document 或目标容器的 mousemove 事件，读取 e.clientX 和 e.clientY，再赋值给元素的 style.left / style.top（或更推荐的 transform: translate()）。
- 必须用
document.addEventListener('mousemove', ...)，而不是绑定在某个按钮上——否则鼠标一离开目标就失效 - 记得用
e.preventDefault()？不用，它对普通mousemove无效，加了也没用 - 如果页面可滚动，要用
pageX/pageY还是clientX/clientY？看需求：clientX/Y相对于视口，适合固定跟随；pageX/Y相对于整个文档，适合锚点式定位 - 性能关键：加
{ passive: true }参数（但注意：如果后续要调e.preventDefault()就不能设 passive）
为什么推荐用 transform 而不是 left/top
直接改 left 和 top 会触发浏览器重排（reflow），而 transform: translate(x, y) 只触发重绘（repaint），GPU 加速更顺滑，尤其在高频 mousemove 下差异明显。
立即学习“前端免费学习笔记（深入）”；
示例代码片段：
const follower = document.getElementById('follower');
document.addEventListener('mousemove', (e) => {
follower.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});
注意：这里没加偏移量，实际使用常要减去元素自身宽高的一半，让中心点对准鼠标，比如：translate(${e.clientX - 8}px, ${e.clientY - 8}px)（假设元素是 16×16px）。
防抖和 requestAnimationFrame 怎么选
原生 mousemove 在快速移动时每秒可能触发上百次，直接更新 DOM 容易卡顿。两种主流优化方式：
- 用
requestAnimationFrame：把更新逻辑塞进下一帧，天然限频，且与屏幕刷新率同步，最常用也最稳妥 - 用节流（throttle）：比如用
setTimeout控制最小间隔 16ms，但不如 rAF 精确 - 别用防抖（debounce）：它会延迟响应，鼠标一停元素才跟上，完全违背“跟随”本意
真实项目里，rAF + transform 是目前最平衡的组合。容易被忽略的是：如果跟随元素本身有动画（比如 hover 缩放），要确保 transform 的多个操作合并正确，避免覆盖——用 style.transform = `translate(...) scale(...)` 手动拼，别分开写两行 style.transform = ...。
