CSS 的 cursor 属性无法直接绑定鼠标坐标，因其仅支持静态关键字或 URL，不支持变量、函数或实时计算；必须通过 JavaScript 监听 mousemove 获取 clientX/clientY 并动态更新 CSS 变量，再用伪元素配合 transform 实现视觉跟随效果。
为什么 cursor: crosshair 不能直接绑定鼠标坐标
CSS 本身没有运行时能力，cursor 属性只接受预定义关键字（如 pointer、crosshair）或指定 URL 的光标文件，不支持表达式、函数或变量插值。所谓“用 CSS 变量传鼠标坐标”，本质是**CSS 不做计算，只做消费；JavaScript 才负责捕获和更新**。
常见误解是写 cursor: url("data:image/svg...?x=var(--mouse-x)&y=var(--mouse-y)"); —— 这完全无效，SVG data URL 是静态字符串，var() 在这里不会被解析，更不会随鼠标实时重求值。
用 document.documentElement.style.setProperty() 动态更新 CSS 变量
真正可行的路径是：JS 监听 mousemove，读取 event.clientX / event.clientY，再把数值写入 :root 或目标元素的自定义属性，CSS 动画/伪元素再用这些变量做定位或变换。
- 必须用
clientX/clientY（视口坐标），而非pageX/pageY，避免滚动偏移干扰 - 更新频率高，建议加节流（如
requestAnimationFrame），否则可能卡顿 - CSS 中不能直接用变量做
transform: translate(var(--mouse-x), var(--mouse-y))，因为translate()要带单位；得写成translate(calc(var(--mouse-x) * 1px), calc(var(--mouse-y) * 1px)) - 若需在伪元素（如
::before）中使用，确保该伪元素的父元素已声明对应变量，或变量定义在:root上
// JS 部分
document.addEventListener('mousemove', e => {
document.documentElement.style.setProperty('--mouse-x', e.clientX);
document.documentElement.style.setProperty('--mouse-y', e.clientY);
});
用 ::after 伪元素模拟带坐标的“动态光标”
当需要视觉上“跟随鼠标移动的动画效果”（比如放大镜、十字线、粒子尾迹），不要试图改系统光标，而是隐藏原生光标，用绝对定位的伪元素替代。
- 必须设
cursor: none在 body 或容器上，否则原生光标会遮挡伪元素 - 伪元素的
left/top建议用calc(var(--mouse-x) * 1px - 50%)实现居中对齐（假设宽高为 100px） - 如果动画涉及缩放或旋转，优先用
transform而非top/left，性能更好 - 注意移动端无
mousemove，需同时监听touchmove并取touches[0]
/* CSS 部分 */
:root {
--mouse-x: 0;
--mouse-y: 0;
}
<p>body {
cursor: none;
}</p><p>body::after {
content: '';
position: fixed;
width: 24px;
height: 24px;
background: radial-gradient(circle, #007bff 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
transform: translate(calc(var(--mouse-x) <em> 1px - 12px), calc(var(--mouse-y) </em> 1px - 12px));
transition: transform 0.05s ease-out;
z-index: 9999;
}</p>
动画卡顿或坐标偏移的三个典型原因
即使代码结构正确，仍常出现“跟手差”或“位置错位”，多数源于以下三点：
- 未禁用默认光标：漏写
cursor: none，导致两个光标重叠，视觉混乱 - 未处理页面缩放（
window.devicePixelRatio）：高 DPI 屏幕下clientX是 CSS 像素，但渲染受缩放影响，必要时需除以devicePixelRatio - 伪元素未设
pointer-events: none：它会拦截鼠标事件，导致下方元素无法响应点击或 hover
最易被忽略的是 scroll 时的坐标一致性——如果容器设置了 overflow: hidden 或 transform: translateZ(0)，需确认 clientX/clientY 是否仍符合预期，有时得换用 getBoundingClientRect() 做相对计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
