如何实现CSS跟随鼠标移动的视差动画_利用CSS变量与JS传递坐标-css教程-PHP中文网

直接用transform: translate()做鼠标视差会卡顿，因每次mousemove触发style.transform修改会强制重排重绘且阻塞主线程；应改用js更新css变量、css通过calc()读取计算位移，并配合requestanimationframe节流和will-change优化。

如何实现css跟随鼠标移动的视差动画_利用css变量与js传递坐标

为什么直接用 `transform: translate()` 做鼠标视差会卡顿

因为每次 mousemove 触发时，若直接修改元素的 style.transform，会强制触发 Layout → Paint → Composite 流程，尤其在高频移动（60fps 下每 16ms 一次）时极易掉帧。更关键的是，纯 JS 操控样式无法利用 GPU 加速的 transform 层级优化——除非你确保只改 translateX/translateY 且元素已启用 will-change: transform 或有 transform: translateZ(0)，但这样仍绕不开 JS 主线程阻塞。

真正轻量的解法是：JS 只负责把坐标存进 CSS 自定义属性，CSS 用 calc() 或 transform 函数读取并计算位移，全程不触碰 DOM 样式树。

实操建议：

监听 mousemove 时用 requestAnimationFrame 节流，避免连发
把 clientX 和 clientY 归一化为 0–1 范围（除以 window.innerWidth/window.innerHeight），再存入 document.documentElement.style
务必给目标元素设置 transform-style: preserve-3d（若涉及多层视差），否则子元素的 3D transform 会被扁平化

如何用 CSS 变量接收 JS 传入的鼠标坐标

CSS 变量本身不能响应式更新动画，但可以被 transform 中的 calc() 实时读取——只要变量值变了，浏览器就会重排该元素的合成层（Compositing Layer），而不会重绘整个页面。

JS 端写法示例：

let rafId = null;
const updateMouseVars = (e) => {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;
  document.documentElement.style.setProperty('--mouse-x', x);
  document.documentElement.style.setProperty('--mouse-y', y);
};
const throttled = () => {
  rafId = requestAnimationFrame(() => updateMouseVars(lastEvent));
};
let lastEvent = null;
document.addEventListener('mousemove', (e) => {
  lastEvent = e;
  if (!rafId) throttled();
});

注意点：

吐司AI高清

吐司AI高清是一款AI图片处理工具，Toast AI 推出的图像超分辨率/修复工具。

下载

不要在 mousemove 回调里直接调 requestAnimationFrame，会导致大量 pending callback；用 lastEvent 缓存 + 单次 RAF 触发更稳
--mouse-x 和 --mouse-y 是全局变量，可被任意选择器读取，无需限定作用域
如果页面有滚动，需额外监听 scroll 并重新计算 clientX/Y 相对于视口的位置，或改用 pageX/pageY 配合 getBoundingClientRect()

如何用 `calc()` 和 `var()` 实现不同层级的偏移比例

视差的本质是「近快远慢」，即同一鼠标位移下，前景层移动幅度大，背景层小。这不能靠 JS 算好再塞变量，而应在 CSS 里用 calc() 动态缩放：

.layer-foreground {
  transform: translate(calc(var(--mouse-x) * 50px), calc(var(--mouse-y) * 50px));
}
.layer-midground {
  transform: translate(calc(var(--mouse-x) * 20px), calc(var(--mouse-y) * 20px));
}
.layer-background {
  transform: translate(calc(var(--mouse-x) * 5px), calc(var(--mouse-y) * 5px));
}

关键细节：

calc() 内部单位必须一致：var(--mouse-x) 是无单位数字（如 0.34），乘以 50px 才合法；写成 var(--mouse-x) * 50 会报错
负号偏移可用 calc(-1 * var(--mouse-x) * 30px)，别漏乘号
若需反向视差（比如鼠标右移时背景左移），直接在 calc() 里加负号即可，无需 JS 改逻辑
移动端需额外处理 touchmove，且注意 clientX/Y 在 touch 事件中要取 e.touches[0].clientX

为什么 `perspective` + `translateZ` 比纯 XY 位移更真实

真实视差含深度感，仅 translateX/Y 是平面滑动。加入 Z 轴后，配合父容器的 perspective，能自然产生近大远小+边缘畸变效果。

结构示例：

.parallax-container {
  perspective: 1000px;
}
.parallax-layer {
  transform: translateX(calc(var(--mouse-x) * 20px))
              translateY(calc(var(--mouse-y) * 20px))
              translateZ(calc(var(--mouse-x) * -100px));
}

要注意：

perspective 必须设在「包含所有视差层的最近公共祖先」上，不能设在 html 或 body（可能被重置）
translateZ 的数值为负才表示「向观察者靠近」，正值是远离；过大值（如 -500px）会导致元素超出透视锥体而消失
开启 perspective 后，元素默认变成 transform-style: flat，必须显式设 transform-style: preserve-3d 才能让子元素保持 3D 位置
部分旧版 Safari 对 translateZ + calc() 组合支持不稳定，可降级为固定 translateZ(-50px) + XY 动画