纯html无法实现鼠标跟随，必须用javascript监听mousemove事件获取clientx/clienty坐标并动态更新元素transform或left/top样式，css仅能辅助过渡动画和视觉表现，无法读取鼠标实时位置。
直接说结论：纯 HTML 无法实现鼠标跟随光标特效，必须用 JavaScript 操控 DOM 和事件；CSS 仅能辅助做动画过渡或基础位移，但“实时追踪鼠标坐标并驱动元素移动”这一步绕不开 mousemove 事件监听和 style.left/style.top 动态赋值。
为什么不能只靠 CSS 实现真正的鼠标跟随
CSS 没有原生机制读取鼠标实时坐标。伪类如 :hover 只能响应元素自身的悬停状态，无法把一个独立的 div（比如小圆点）绑定到鼠标指针位置上。所谓“CSS 跟随”方案，本质是用 pointer-events: none 让装饰层不拦截事件，再配合固定定位 + JS 驱动——CSS 只管“怎么动”，JS 才管“动到哪”。
document.addEventListener('mousemove', ...) 是核心入口
所有可靠跟随效果都从此开始。注意几个关键点：
- 必须监听
document或window，而不是某个容器，否则鼠标移出容器就失效 - 事件对象的
clientX/clientY给的是视口坐标，适合绝对定位元素；若需兼容滚动页面，得加上window.scrollX/window.scrollY - 高频触发（每毫秒都可能来一次）易卡顿，建议用
requestAnimationFrame节流，而不是setTimeout或throttle函数封装
如何让跟随元素“不抖、不滞后、不遮挡”
常见问题不是代码写不出来，而是体验崩在细节上：
- 避免直接设
left/top像素值后立刻重排：用transform: translate(x, y)更高效，且支持硬件加速 - 跟随元素默认会挡住点击目标，务必加
pointer-events: none到该元素样式中 - 如果页面有缩放（
zoom或transform: scale()），clientX/Y不自动适配，需手动除以window.devicePixelRatio或监听resize重新校准 - 移动端没有稳定鼠标坐标，
mousemove在触摸设备上基本不触发，需额外处理touchmove并取touches[0]
真正难的不是写出第一版跟随效果，而是让它在缩放、滚动、高 DPI、触屏混合场景下都不露馅——这些边界情况往往被新手忽略，等上线才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
