hover时transform无过渡效果需显式声明transition: transform；连续跟随需js监听mousemove并用requestanimationframe节流；移动端触摸抖动应防抖并降级处理。
hover时标题位置没动，但阴影/颜色在动——transition没作用在transform上
很多人写 transition: all 0.3s，结果 hover 时 transform: translateX(5px) 没有过渡效果，只看到“啪”一下跳过去。根本原因是：浏览器对 transform 的动画支持依赖于是否被声明为可过渡属性，all 在部分旧浏览器（如 Safari 12-）或某些 CSS 前缀缺失场景下会漏掉它。
- 必须显式写
transition: transform 0.3s ease，别偷懒用all - 如果同时要动颜色和偏移，写成
transition: transform 0.3s ease, color 0.3s ease - 确保 hover 触发的样式里确实修改了
transform，而不是只改left/top（后者会触发重排，性能差且过渡不稳）
用translateZ(0)或will-change触发GPU加速，但别乱加
想让悬浮偏移更顺滑，有人直接给标题加 will-change: transform 或 transform: translateZ(0)。这确实能启用 GPU 合成层，但副作用明显：内存占用上升、滚动卡顿、甚至在低端安卓机上引发闪烁。
- 仅当实际观察到卡顿（比如标题在滚动容器内频繁 hover）时再加
will-change: transform - 加完必须配
transform: none的初始态，否则元素可能渲染错位 -
translateZ(0)是兼容性更广的 hack，但现代 Chrome/Firefox 已不推荐，优先用will-change+ 显式清理
鼠标移动时标题“追着指针跑”——不是靠hover，得用JavaScript监听mousemove
纯 CSS 的 :hover 只能做“进/出”两级状态，实现不了“指针越靠近标题左侧，它越往右偏；越靠近右侧，它越往左偏”这种连续跟随。这时候必须上 JS，但要注意性能陷阱。
- 用
element.addEventListener('mousemove', handler, { passive: true })，避免阻塞滚动 - 别在 handler 里直接改
style.transform，先用requestAnimationFrame节流 - 计算偏移量时，用
getBoundingClientRect()获取标题自身尺寸，再根据event.clientX算相对位置比例，别硬写像素值 - 示例核心逻辑：
const rect = title.getBoundingClientRect(); const x = event.clientX - rect.left; const offsetX = (x / rect.width - 0.5) * 20; // 最大偏±20px title.style.transform = `translateX(${offsetX}px)`;
移动端 touchstart/touchmove 下偏移抖动严重
在 iOS Safari 或安卓 Chrome 上，手指刚点下去那一下，touchstart 的坐标经常不准，紧接着 touchmove 又滞后几帧，导致标题“抽搐式”偏移。这不是代码 bug，是触摸事件固有延迟。
立即学习“前端免费学习笔记（深入）”；
- 不要直接用
touchstart初始化偏移，等第一个touchmove再开始跟踪 - 给移动端加
touch-action: none到标题上，防止系统默认手势（如拖拽）干扰 - 如果只是简单悬停反馈，建议移动端降级为纯 CSS
:active缩放或变色，放弃精细跟随 - 真要跟，务必加防抖：两次
touchmove间隔小于 16ms 就丢弃，强制每帧最多更新一次
视觉跟随的本质是“用最小代价骗过眼睛”，CSS 能做的就别动 JS，JS 动了就得管好生命周期——比如离开视口时清掉 mousemove 监听，不然内存泄漏比偏移抖动还难查。
