鼠标跟随文字的核心是监听 document 的 mousemove 事件，用 clientx/clienty 获取视口坐标，通过 transform: translate() 动态定位并设 position: fixed/absolute 和 pointer-events: none。
文字能跟随鼠标移动，核心不是靠 HTML5 新特性，而是用 mousemove 事件监听鼠标位置，再用 JavaScript 动态更新元素的 left 和 top（或 transform: translate()），配合 CSS 设置 position: fixed 或 absolute。HTML5 本身不提供“鼠标跟随”功能，但提供了更可靠的事件 API 和 CSS 合成能力。
监听 mousemove 并获取坐标
必须监听 document 或 window 的 mousemove，不能只监听某个容器——否则鼠标移出容器就停止响应。坐标要用 event.clientX 和 event.clientY，它们返回视口内坐标，不受滚动影响，比 pageX/Y 更稳定。
- 避免用
event.pageX/pageY：页面滚动时会包含 scrollTop/Left 偏移，导致文字跳动 - 节流是必须的：高频
mousemove会卡顿，建议用requestAnimationFrame或 16ms 间隔限制 - 首次触发前要初始化文字位置，否则可能闪现在左上角
用 transform: translate() 替代 left/top 定位
直接改 element.style.left 和 style.top 触发重排（reflow），性能差；而 transform: translate(x, y) 只触发重绘（repaint），且能被 GPU 加速。CSS 必须设 position: fixed（全屏跟随）或 absolute（相对父容器），并加 pointer-events: none 防止遮挡鼠标事件。
-
position: fixed适合全局悬浮文字（如提示标语） -
position: absolute需确保父容器position: relative - 务必加
pointer-events: none，否则文字会拦截后续的 click/mouseover
基础可运行示例（含防抖和 transform）
下面代码实现一个轻量、无依赖的鼠标跟随文字效果，已处理初始定位、节流和坐标偏移（让文字略偏右下，避免遮挡鼠标指针）：
立即学习“前端免费学习笔记（深入）”；
<style>
.follow-text {
position: fixed;
pointer-events: none;
font-size: 14px;
font-weight: bold;
color: #333;
z-index: 9999;
transition: opacity 0.2s;
}
</style>
<div class="follow-text">Hello</div>
<script>
const el = document.querySelector('.follow-text');
let isAnimating = false;
function updatePosition(e) {
if (isAnimating) return;
isAnimating = true;
requestAnimationFrame(() => {
// 偏移 12px 右 + 12px 下，避免盖住鼠标
el.style.transform = `translate(${e.clientX + 12}px, ${e.clientY + 12}px)`;
isAnimating = false;
});
}
document.addEventListener('mousemove', updatePosition);
</script>
常见失效原因和调试点
文字不动、跳动、错位，90% 出在以下三处：
- CSS 缺少
position: fixed或absolute：元素仍在文档流中，transform不生效或表现异常 - JS 获取的是
offsetX/Y或layerX/Y：这些是相对于事件目标的坐标，完全不适合跟随场景 - 元素被其他 CSS 覆盖（如
display: none、visibility: hidden、父级overflow: hidden） - 未加
pointer-events: none导致鼠标悬停文字时触发mouseleave，产生抖动
真正要注意的不是“怎么写”，而是坐标源是否可靠、渲染方式是否高效、交互是否被意外阻断。这三个点没理清，再炫的动画也容易在真实项目里翻车。
