CSS实现跟随鼠标移动的自适应光标效果教程

想用 CSS 实现鼠标跟随？先搞清楚这个前提

如果非要讨论“用 CSS 实现跟随鼠标光标”这个需求，那必须先明确一点：纯 CSS 本身无法读取 clientX 或 clientY，更谈不上在运行时实时计算坐标。所谓“CSS 实现”的鼠标跟随效果，本质上都是用 JavaScript 驱动逻辑、CSS 负责渲染呈现——前者是大脑，后者是手脚。所以别指望只靠 CSS 就能让一个元素跟着鼠标满屏跑，这根本不在它的能力范围内。

为什么 cursor: url() 只是一个伪解法

很多人第一反应是：直接用 cursor: url() 不就好了？但这条路根本走不通，因为 cursor: url() 只接受一个静态图片路径，浏览器不会在每次鼠标移动时重新加载或重定位光标图片。滚动、缩放、transform 变换、容器嵌套……这些场景下，系统级光标根本无法配合。一旦页面有了横向滚动条，或者用户按了 Ctrl+ 把页面放大到 1.2 倍，光标位置就会明显错位。而且系统级光标完全没办法做 hover 状态切换、尺寸缩放、动画过渡——这些交互层面的需求，cursor: url() 一个都满足不了。

最轻量的方案：::before 伪元素 + CSS 变量

相比新增 DOM 节点，这种方案更省性能开销，也能避免 pointer-events: none 漏设导致点击失效之类的低级错误。具体做法分几步：

• 监听 mousemove 和 touchmove，从事件对象中获取 e.clientX 和 e.clientY，注意这里推荐用 clientX 而不是 pageX，前者在滚动场景下更稳定。
• 把坐标值赋值给 CSS 变量：document.documentElement.style.setProperty('--x', Math.round(e.clientX) + 'px')。
• 伪元素必须设置 content: ""、position: fixed、pointer-events: none，这三点缺一不可。
• 定位的关键写法是：transform: translate(calc(var(--x) - 12px), calc(var(--y) - 12px))，这里假设光标宽高各 24px，所以偏移了 12px。如果光标实际尺寸不同，偏移量要相应调整。
• 有一个容易被忽略的细节：* 1px 不能省略。因为 var(--x) 是带单位的字符串，calc() 需要显式转换单位，否则计算结果会变成 NaN。

移动端与缩放场景下的三个必修课

在桌面端跑通，不等于全平台可用。下面这几个坑必须在开发阶段就踩平：

• 移动端没有 mousemove 事件，必须同时监听 touchmove，并且从 e.touches[0] 取坐标。给事件监听加上 { passive: false }，才能调用 preventDefault() 阻止默认行为。
• 当用户缩放页面（Ctrl+ 滚轮，或 macOS 触控板双指缩放），clientX 和 CSS 像素会自动对齐，不需要手动去掉 window.devicePixelRatio。但要注意，如果外层容器用了 transform: scale(0.8) 这种写法，就需要反向修正坐标。最稳妥的做法是直接避免这种布局。
• iOS Safari 在惯性滚动中可能会丢失 touchmove 事件。监听 document 比监听 body 更可靠，实在不行还可以用 scroll 事件配合 requestAnimationFrame 补帧。

还有一个最容易被忽略的细节：伪元素的尺寸浮动问题。如果光标是一个文字提示框，内容长度变化会破坏 translate(-12px, -12px) 的居中基准。生产环境建议固定宽高，用 text-overflow: ellipsis 控制内容溢出，或者干脆把光标设计成固定尺寸的图标。