鼠标跟随效果的核心原理是监听mousemove事件获取鼠标坐标，用transform: translate()动态更新元素位置并加入插值延迟实现视觉跟随；需避免遮挡交互、处理滚动偏移及层叠上下文问题。
鼠标跟随效果的核心原理是什么
实现鼠标跟随，本质是监听 mousemove 事件，实时获取鼠标坐标，再用 JavaScript 动态更新某个元素的 left 和 top（或 transform: translate()）位置。关键不是“追着鼠标跑”，而是让目标元素的位置始终略滞后于鼠标——否则会完全重叠、失去视觉反馈。
- 直接用
event.clientX/event.clientY获取屏幕坐标，注意要减去页面滚动偏移（window.scrollX/window.scrollY）才准 - 不推荐直接设
style.left = x + 'px'，因为会覆盖其他 CSS 定位；优先用transform: translate()，性能更好且不触发重排 - 跟随延迟（easing）靠 requestAnimationFrame + 简单插值实现，不用 setInterval 或 setTimeout
最简可用的跟随光标代码怎么写
下面这段可以直接粘贴进 HTML 的 <script></script> 标签里运行，创建一个半透明小圆点跟随鼠标：
<div id="cursor" style="position: fixed; width: 12px; height: 12px; background: #007bff; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; z-index: 9999;"></div>
<script>
const cursor = document.getElementById('cursor');
let x = 0, y = 0;
let tx = 0, ty = 0;
<p>document.addEventListener('mousemove', e => {
x = e.clientX - window.scrollX;
y = e.clientY - window.scrollY;
});<p>function animate() {
tx += (x - tx) <em> 0.12;
ty += (y - ty) 0.12;
cursor.style.transform = <code>translate(${tx}px, ${ty}px);
requestAnimationFrame(animate);
}
animate();
</script>
-
pointer-events: none确保光标不会遮挡按钮或链接的点击 -
mix-blend-mode: difference让光标在深色/浅色背景上都可见（可选，但实用） - 插值系数
0.12控制跟随意愿：越小越拖尾，越大越跟紧；低于0.05明显滞后，高于0.2接近无延迟
为什么加了跟随后点击失效或文字选不了
这是最常见的副作用，根本原因是自定义光标遮挡了底层内容。即使设置了 pointer-events: none，以下情况仍会出问题：
- 元素用了
transform或opacity，导致层叠上下文改变，使pointer-events: none失效范围异常 - 自定义光标
z-index过高，且父容器有overflow: hidden，光标被裁切的同时也干扰事件流 - 页面启用了
touch-action: none（常见于轮播图或手势库），会连带抑制鼠标事件穿透
解决办法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把
#cursor放在最底部，确保它不嵌套在任何有transform或filter的容器里 - 检查是否误给
body或html加了touch-action: none，删掉或改为touch-action: auto - 如果必须支持触摸设备，用
if ('ontouchstart' in window) return;跳过移动端初始化
想换图标或加悬停放大效果怎么办
替换光标形状，不要改 background，改 background-image 或用伪元素更灵活：
#cursor::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="%23007bff"></circle></svg>');
}
悬停放大需监听 mouseenter / mouseleave，但注意不能直接改 transform，否则和跟随逻辑冲突。正确做法是加一个缩放变量参与插值：
let scale = 1;
document.addEventListener('mouseenter', e => {
if (e.target.matches('a, button, .hoverable')) scale = 1.6;
});
document.addEventListener('mouseleave', e => {
if (e.target.matches('a, button, .hoverable')) scale = 1;
});
// 然后在 animate() 里：
cursor.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
这种叠加方式才能和跟随运动自然融合。硬编码 transition: transform 0.2s 在 #cursor 上反而会导致抖动或延迟响应。
实际项目中，真正难的不是写出来，而是让跟随行为在各种滚动、缩放、iframe 嵌入、第三方组件共存的场景下依然稳定——这些细节往往比动画本身更耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
