用 CSS transform 实现按钮轻微晃动效果需监听父容器 mousemove，计算鼠标归一化位置并动态设置 rotate 和 translate，配合 transition 实现弹性反馈，幅度控制在 ±2°/±4px 内以保障可用性。
用 CSS transform 实现按钮轻微晃动效果
纯 HTML 无法让按钮跟随鼠标移动，但可以用 CSS + 少量 JavaScript 实现“视觉上跟随鼠标晃动”的轻量效果——本质是监听 mousemove，动态更新按钮的 transform: rotate() 或 translate() 值，制造轻微偏移感。
关键不是真跟着鼠标跑（那会很突兀），而是根据鼠标在容器内的相对位置，给按钮一个微小、有方向的倾斜或位移，模拟“被带偏”的物理反馈。
监听鼠标位置并计算偏移量
需要绑定 mousemove 到按钮父容器（比如 .product-card），避免按钮自身遮挡事件。直接监听按钮会导致鼠标一靠近就触发、离开就中断，晃动不连贯。
- 用
getBoundingClientRect()获取容器坐标，算出鼠标在容器内的归一化位置（-1 到 1） - 把 X/Y 偏移映射为旋转角度（如 -2° ~ +2°）或像素位移（如 -4px ~ +4px）
- 用
requestAnimationFrame更新样式，避免频繁重排
const cartBtn = document.querySelector('.add-to-cart');
const container = cartBtn.closest('.product-card');
<p>container.addEventListener('mousemove', (e) => {
const rect = container.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5; // -0.5 ~ 0.5
const y = (e.clientY - rect.top) / rect.height - 0.5;</p><p>cartBtn.style.transform = <code>rotate(${x * 2}deg) translateY(${y * 4}px)</code>;
});用 CSS transition 配合 JS 更自然
只靠 JS 硬设 transform 容易生硬。加一层 CSS 过渡能缓和变化，让晃动有“弹性”：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
transition: transform 0.2s ease-out - JS 中每次只设目标值，CSS 自动插值过渡
- 移出容器时，可设回默认值（如
transform: none）或留一点余韵（不重置）
注意：不要对 transform 同时加 will-change: transform，小元素没必要，反而可能触发额外层合成，得不偿失。
移动端适配和性能坑点
手机端没有持续 mousemove，要用 touchmove 替代，且需 { passive: false } 才能阻止默认滚动干扰；但更推荐在移动端直接禁用该效果——手指滑动时强行晃动按钮，既难感知又耗电。
- 用
if ('ontouchstart' in window)检测并跳过初始化 - 确保容器有明确宽高，否则
getBoundingClientRect()返回 0，导致计算失效 - 避免在
body上监听——页面滚动时频繁触发，CPU 占用明显上升
真正容易被忽略的是：晃动幅度必须克制。超过 ±3° 或 ±6px 就开始干扰点击意图，用户会觉得按钮“不稳”，反而降低转化率。
