纯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 控制内容溢出。
