最简实现按钮悬停缩放+阴影动效：用 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 写法问题，而是渲染管线瓶颈。
