纯css实现鼠标跟随渐变色的关键是background-position配合radial-gradient，通过js动态更新--x/--y变量并用transition平滑过渡，需注意坐标计算、避免简写覆盖、防抖优化及高dpi适配。
用 background-position 配合 radial-gradient 实现鼠标跟随渐变色，不依赖 JS
纯 CSS 就能做，关键不是“跟着动”，而是“看起来像跟着动”——利用背景定位 + 径向渐变 + transition 模拟响应式高光。鼠标移入容器时，把渐变中心点设为 background-position: calc(100% - var(--x)) calc(100% - var(--y))，再靠 JS 动态更新 --x 和 --y 变量即可。
常见错误是直接用 background-position: x y 写死像素值，结果过渡卡顿或跳变。必须配合 transition: background-position 0.2s ease，且初始值和目标值单位、顺序要一致（都用 px 或都用 calc()）。
- 容器需设
background-clip: padding-box，避免边框干扰定位 -
radial-gradient(circle at var(--x) var(--y), #ff6b6b, transparent 70%)中的at位置必须和background-position同步，否则高光偏移 - 移动端需监听
touchmove并阻止默认行为，否则滚动时变量不更新
JS 更新 --x/--y 时，坐标要减去容器 offset
直接用 event.clientX / clientY 是错的——它相对于视口，而 CSS 变量需要相对于容器左上角。必须先拿到容器的 getBoundingClientRect()，再做减法。
容易踩的坑：没处理 transform 影响。如果容器有 scale(0.9) 或 translateZ(0)，getBoundingClientRect() 返回的仍是渲染后坐标，但鼠标事件坐标未缩放，会导致偏差。此时得手动除以缩放系数，或改用 element.setPointerCapture() + offsetX/offsetY（兼容性稍差）。
- 推荐写法：
const rect = el.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; - 赋值前加边界判断：
x = Math.max(0, Math.min(x, rect.width));，防止超出后渐变消失 - 用
requestAnimationFrame包一层更新逻辑，避免高频触发导致丢帧
transition 失效？检查 background 属性是否被简写覆盖
很多人写了 transition: background-position 0.3s 却没效果，根源是后续用了 background: linear-gradient(...) #fff 这类简写——它会重置所有 background 子属性，包括 background-position，导致 transition 找不到可过渡的起始值。
正确做法是拆开写：background-image、background-position、background-size 分开声明，或确保简写中显式带上 background-position 值。
- 错误：
el.style.background = 'radial-gradient(...) #000';→ 覆盖 position - 正确：
el.style.backgroundImage = 'radial-gradient(...); el.style.backgroundPosition = `${x}px ${y}px`'; - 更稳妥：只用 CSS 变量控制，JS 只更新
--x/--y，CSS 里写死background-position: var(--x) var(--y)
性能敏感场景下，避免在 mousemove 里频繁 setStyle
每毫秒都调 element.style.setProperty('--x', x + 'px') 会强制同步布局（layout thrashing），尤其在低配设备上明显卡顿。不是所有浏览器都对 CSS 变量更新做优化。
真正省资源的做法是：只在鼠标移动距离超过阈值（比如 4px）或间隔超过 16ms 时才更新变量。或者干脆用 CSS @property 声明类型（type: '<length>'</length>），开启硬件加速，但注意 Safari 目前不支持。
- 简单防抖：
let ticking = false; function update() { if (!ticking) { requestAnimationFrame(() => { /* 更新变量 */; ticking = false; }); ticking = true; } } - 不用
transform替代背景定位？可以，但background的径向渐变更自然，transform移动伪元素会有边缘锯齿 - 如果只要悬停高光，不用实时跟随，直接用
:hover::before+transition更轻量
最麻烦的其实是高 DPI 屏幕下的坐标换算，window.devicePixelRatio 会影响 clientX 精度，但 CSS 变量本身不认 DPR，所以通常不用额外处理——除非你发现 Mac 上鼠标偏移明显，那就要在计算时除以 devicePixelRatio。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
