纯 css 无法实现真正鼠标跟随吸附，需 javascript；但轻量磁吸效果可用 :hover + transform + transition 实现，推荐位移 ±8px 内、cubic-bezier 动画曲线，并注意 display、box-shadow 性能及 raf 节流等细节。
纯 CSS 无法实现真正意义上的鼠标跟随吸附，必须用 JavaScript 监听 mousemove 并动态计算偏移；但若只要轻量视觉反馈，:hover + transform + transition 就够用，且零 JS、无兼容风险。
用 CSS 实现 hover 磁吸感（无 JS，适合入口强调）
这不是“跟随”，而是状态切换式位移，成本最低、最稳定：
-
transform: translate()值建议控制在 ±8px 内，人眼可辨又不突兀 - 必须加
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)，比默认ease更有“吸”的张力 - 避免给按钮设
display: inline，它会受换行影响定位，改用inline-block或flex子项 - 若按钮带圆角或阴影，
box-shadow比filter: drop-shadow()性能高得多，后者会触发全层重绘
示例片段：
.magnetic-btn {
position: relative;
display: inline-block;
padding: 12px 24px;
background: #4a6fa5;
color: white;
border-radius: 6px;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.2s ease;
}
.magnetic-btn:hover {
transform: translate(4px, -4px);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
用 JS 实现真实鼠标跟随吸附（有方向性，需节流）
关键不是“动”，而是“稳”：抖动、跳变、飞出视口，90% 都因没做这三件事：
- 只在
btn.matches(':hover')为 true 时才执行计算，空闲时不监听也不运算 - 用
getBoundingClientRect()算中心点，再减clientX/clientY得dx/dy，别用pageX/pageY（滚动时失效） - 偏移量必须限幅，比如
Math.max(-12, Math.min(12, dx))，否则鼠标一靠近就位移失控 - 所有 DOM 更新必须包在
requestAnimationFrame里，直接写在mousemove中会导致掉帧
简化的逻辑骨架：
btn.addEventListener('mousemove', (e) => {
if (!btn.matches(':hover')) return;
const rect = btn.getBoundingClientRect();
const dx = e.clientX - (rect.left + rect.width / 2);
const dy = e.clientY - (rect.top + rect.height / 2);
const limitedX = Math.max(-12, Math.min(12, dx));
const limitedY = Math.max(-12, Math.min(12, dy));
requestAnimationFrame(() => {
btn.style.transform = `translate(${limitedX}px, ${limitedY}px)`;
});
});
吸附按钮边缘自动停靠（拖拽后释放场景）
这种“吸附到左/右/上/下边缘并露出一半”的行为，和鼠标跟随是两套逻辑，常见于悬浮菜单。核心是松手时判断坐标：
- 获取按钮当前
getBoundingClientRect()的left、right、top、bottom - 对比视口宽度
window.innerWidth和高度window.innerHeight - 选最近的边：比如
left → 吸左；<code>right > window.innerWidth * 2/3→ 吸右 - 目标位置不是贴边，而是留出半宽/半高：吸左时
left: 0改为left: -btn.offsetWidth / 2 - 动画用
transition: left 0.3s ease-out, top 0.3s ease-out，别用 JS 动画帧，简单可靠
最容易被忽略的是：吸附逻辑一旦引入，就必须处理窗口缩放（resize）和滚动（scroll）后的重算——尤其当按钮父容器本身也在滚动或变换中时，getBoundingClientRect() 返回的是视口坐标，但吸附目标却是 viewport 边缘，这两者在缩放或高 DPR 屏幕下可能错位几个像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
