用 transform 而非 margin-top 是因后者触发重排导致卡顿，前者仅重绘且 GPU 加速；需显式声明 transition、补偿 box-shadow 偏移、避免上下文干扰。
为什么按钮悬停位移用 transform 而不是 margin-top
因为 margin-top 或 top 会触发浏览器重排（reflow），强制重新计算整个布局，动画容易卡顿；而 transform: translateY() 只触发重绘（repaint），由 GPU 加速，更顺滑。真实项目中，哪怕只是 -4px 的上浮，用 margin-top 在低端安卓或旧版 Safari 上都可能出现掉帧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 始终用
transform: translateY(-4px)实现上浮，不要写margin-top: -4px - 若必须兼容 IE11，需加
-ms-transform: translateY(-4px)，但更推荐用 Autoprefixer 自动补全 - 避免在同一个元素上混用
transform和top/left，会导致合成层冲突，动画撕裂
transition 必须显式声明，否则 hover 是突变
只写 .btn:hover { transform: translateY(-4px); } 是没动画的——浏览器不知道你要过渡，直接跳变。必须提前在常态样式里声明 transition，且要覆盖到目标属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写
transition: transform 0.2s ease;，别用transition: all 0.2s ease;（除非真需要同时动多个属性） -
ease比linear更自然，有缓入缓出感；若想更轻盈，可用cubic-bezier(0.34, 1.56, 0.64, 1) - 移动端不触发
:hover，所以这个动画纯属视觉增强，不能作为功能依赖
怎么让阴影“不动”，只按钮动
默认情况下，transform 位移会带着 box-shadow 一起跑，看起来像整块飘起来，失去“浮起”质感。真正专业效果是：按钮上移，阴影在页面坐标系里锚定原位——靠反向补偿 box-shadow 偏移实现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若按钮
transform: translateY(-4px)，则box-shadow的垂直偏移要 +4px（例如从4px 4px→4px 0px） - 必须同步加
transition到box-shadow，比如transition: transform 0.2s ease, box-shadow 0.2s ease; - 别用
transition: all，否则可能意外触发其他属性动画，增加渲染负担 - 确保父容器没设
overflow: hidden，否则补偿后的阴影会被裁掉
哪些地方容易被忽略
最常出问题的不是“怎么写”，而是上下文干扰：按钮被 disabled、父层 pointer-events: none、内联 style 覆盖、或选择器优先级不够。这些导致 :hover 根本不生效，调试时却还在调 transform 参数。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具检查 computed styles，确认
:hover规则是否被划掉（表示未匹配） - 临时加
outline: 1px solid red到:hover，看是否触发——排除 CSS 层叠问题 - 如果按钮是 JS 动态插入的，确保 class 名没拼错，且没被框架（如 React）的 CSS-in-JS 机制隔离
- iOS Safari 对
will-change: transform敏感，加了反而滚动卡顿，90% 场景不需要它
