CSS如何实现动态光标跟随效果_利用CSS变量与鼠标事件-css教程-PHP中文网

光标跟随效果必须用 javascript 驱动，css 仅通过变量和伪元素实现定位；需监听 mousemove/touchmove，用 raf 优化性能，注意滚动、缩放、多端兼容及交互不干扰。

css如何实现动态光标跟随效果_利用css变量与鼠标事件

光标跟随效果必须用 JavaScript 驱动

纯 CSS 无法读取鼠标坐标，cursor 属性只支持有限的内置样式或图片，不支持实时位置计算。所谓“CSS 实现动态光标跟随”，本质是用 JS 获取 clientX/clientY，再通过 CSS 变量把坐标透传给伪元素或装饰层。

常见错误现象：:hover + transform: translate() 看起来像跟随，实则是静态偏移；或者误以为 cursor: url(...) 能动态更新，但该 URL 是硬编码，无法响应鼠标移动。

必须监听 mousemove 事件，持续更新自定义 CSS 变量（如 --mouse-x、--mouse-y）
目标元素需设 position: relative 或 position: fixed，否则伪元素定位会错乱
避免在 body 上直接监听 —— 滚动时 clientX/Y 仍有效，但若用 pageX/Y 未处理滚动偏移，光标会漂移

用 `::before` 或 `::after` 渲染跟随光标

这是最轻量、兼容性最好的方案：不新增 DOM 节点，靠伪元素 + CSS 变量定位。关键在于用 calc() 把变量转为像素值，并确保单位正确。

使用场景：替代原生光标、做悬停高亮圈、实现“磁吸式”指针反馈。

伪元素需设 content: ""、position: fixed（或 absolute，取决于容器定位）
CSS 变量值默认无单位，必须显式写成 calc(var(--mouse-x) * 1px)，否则计算无效
为防抖动，建议加 pointer-events: none，避免伪元素拦截鼠标事件

示例关键代码：

body::before {
  content: "";
  position: fixed;
  width: 12px;
  height: 12px;
  background: #007bff;
  border-radius: 50%;
  transform: translate(calc(var(--mouse-x, 0) * 1px), calc(var(--mouse-y, 0) * 1px));
  pointer-events: none;
  z-index: 9999;
}