最简实现按钮悬停缩放+阴影动效：用 transform: scale(1.05) 和 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 配合 transition: all 0.2s ease，兼顾轻量、顺滑与可点击感知。
按钮悬停时缩放+阴影变化最简实现
直接用 transform 和 box-shadow 配合过渡，不依赖 JS 就能做出轻量又顺滑的动效。关键不是“炫”，而是让用户明确感知到可点击状态。
-
transform: scale(1.05)比scale(1.2)更克制，避免布局跳动 - 阴影必须同时改
box-shadow的模糊半径和偏移量，单改颜色会显得僵硬 - 过渡时间统一设为
transition: all 0.2s ease，比cubic-bezier更稳妥，尤其在低性能设备上
button {
transition: all 0.2s ease;
}
button:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
点击反馈用 :active 而非 JavaScript 模拟
移动端真机上，:active 伪类默认延迟约 300ms，必须加 touch-action: manipulation 才能即时响应。否则用户点下去没反馈，会下意识连点两次。
- 不要用
onclick绑定空函数来“激活”:active，无效 -
:active中只改视觉属性（如transform: scale(0.98)、opacity），避免触发布局重排 - 若需兼容 iOS Safari 旧版本，得额外加
-webkit-tap-highlight-color: transparent
文字描边动画容易卡顿的真正原因
用 text-shadow 做呼吸或描边动画时，如果帧率掉到 30fps 以下，人眼会明显察觉闪烁。这不是 CSS 写法问题，而是渲染管线瓶颈。
- 避免同时对多个按钮批量启用
text-shadow动画，优先用单个关键按钮 - 动画只作用于
color或opacity，比text-shadow更省 GPU 资源 - 真要描边动效，改用
background-clip: text+text-fill-color: transparent，再配合background-image: linear-gradient()动画，更稳定
深色模式下按钮动画的对比度陷阱
很多动效在浅色背景看着很酷，切到深色模式后文字几乎看不见——不是动画失效，是颜色值没适配。
立即学习“前端免费学习笔记（深入）”；
- 别写死
box-shadow: 0 4px 12px rgba(0,0,0,0.15)，换成rgba(var(--shadow-rgb), 0.15)配合 CSS 变量 -
:hover的缩放效果在深色模式下若搭配高饱和主色，容易造成视觉过载，建议同步降低filter: brightness(0.95) - 动画持续时间在深色模式下可略缩短（如
0.18s），因为暗背景下人眼对运动更敏感
transition 会堆积，导致后续悬停延迟。加一句 transition-property: transform, box-shadow, opacity 明确限定属性，比全写 all 更可靠。 
