如何用CSS实现鼠标跟随的动画效果？-css教程-PHP中文网

纯 css 无法实现真跟随，因其无法获取鼠标坐标，:hover 和 transform 只能伪跟随；必须用 javascript 监听 mousemove 获取 clientx/clienty，结合 requestanimationframe 和 transform 实现像素级同步。

如何用css实现鼠标跟随的动画效果？

直接用 pointer-events: none 配合绝对定位的元素 + JavaScript 实时更新 left/top 是最可控、兼容性最好的方案；纯 CSS 无法真正“跟随鼠标”，所谓“CSS 跟随”只是利用 :hover 或 transform: translate() 做伪跟随，适用场景非常有限。

为什么不能只靠纯 CSS 实现真跟随？

CSS 本身没有访问鼠标坐标的能力，:hover 只能响应元素区域内的悬停，cursor 属性只能改光标形状，无法创建一个独立于触发元素、始终贴着鼠标移动的动画层。所有号称“纯 CSS 跟随”的方案，本质都是把动画绑定在某个固定容器上（比如 body），再靠 transform 做延迟偏移或视差错觉——不是实时跟随，更不是像素级同步。

JavaScript + CSS 的最小可行实现

核心是监听 mousemove，读取 event.clientX 和 event.clientY，写入一个带过渡的 DOM 元素的 style.left / style.top。关键细节：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

目标元素必须设 position: fixed 或 absolute，且 pointer-events: none，否则会干扰原页面交互
推荐用 requestAnimationFrame 而非直接在 mousemove 里更新样式，避免丢帧
坐标需减去元素自身宽高的一半，实现“中心对齐鼠标”效果
过渡用 transition: transform 0.1s ease-out 比直接改 left/top 更流畅（避免 layout thrashing）

const follower = document.getElementById('follower');
document.addEventListener('mousemove', e => {
  requestAnimationFrame(() => {
    const x = e.clientX - follower.offsetWidth / 2;
    const y = e.clientY - follower.offsetHeight / 2;
    follower.style.transform = `translate(${x}px, ${y}px)`;
  });
});

常见踩坑点：坐标偏移失效 & 性能卡顿

典型现象是跟随元素“漂移”或明显滞后。原因和解法：

页面有滚动：用 clientX/clientY（视口坐标），别用 pageX/pageY（文档坐标）——除非你明确需要随滚动一起动
元素被缩放（如 transform: scale(0.8)）：CSS 缩放不影响 offsetWidth/Height，但影响视觉尺寸，需手动按比例修正偏移量
频繁重排：直接写 left/top 触发 layout，改用 transform + will-change: transform 提前告知浏览器优化
移动端缺失：mousemove 在触摸设备上不触发，需额外监听 touchmove 并取 touches[0]