如何通过CSS实现一个跟随鼠标移动的自适应光标效果

纯CSS无法实现真正跟随鼠标移动的自适应光标效果，因其缺乏读取clientX/clientY及运行时坐标计算能力；所谓“CSS实现”实为JS驱动+CSS渲染，CSS仅负责定位与样式。

纯 CSS 无法实现真正跟随鼠标移动的自适应光标效果——它没有读取 clientX/clientY 的能力，也没有运行时坐标计算逻辑。所谓“CSS 实现”，本质是 JS 驱动 + CSS 渲染，CSS 只负责定位和样式。

为什么不能只用 cursor: url()

cursor: url() 只接受静态路径字符串，浏览器不会在每次鼠标移动时重新加载或重定位图片；它不响应滚动、缩放、transform 或容器嵌套，且系统级光标无法做 hover 状态切换、尺寸缩放或动画过渡。一旦页面有横向滚动条或 zoom: 1.2，光标就会明显错位。

用 ::before 伪元素 + CSS 变量最轻量

比新增 DOM 节点更少开销，也避免 pointer-events: none 漏设导致点击失效的问题：

• 监听 mousemove 和 touchmove，统一用 e.clientX/e.clientY（不是 pageX）赋值给 --x/--y
• 写入根元素：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）
• * 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 控制内容溢出。