想用 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 控制内容溢出，或者干脆把光标设计成固定尺寸的图标。
