使用:active伪类结合transform可实现按钮按压动画。通过scale缩小和translateY位移模拟下陷效果，配合0.1s左右的transition确保动画平滑，增强用户体验，无需JavaScript且性能良好，适用于桌面和移动端交互设计。
在使用 CSS 制作按钮点击反馈时，:active 伪类结合 transform 能够实现自然的按压动画效果。这种做法无需 JavaScript，性能好，用户体验更生动。
基本原理
:active 会在元素被鼠标按下或触摸激活时生效，而 transform 可以用来缩放、位移或旋转元素。两者结合可模拟“按下”动作。
例如，让按钮在点击时轻微下陷：
.button {
padding: 12px 24px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.98);
}
增强真实感：配合位移动画
除了缩放，也可以加入微小位移，模仿物理按压感：
立即学习“前端免费学习笔记（深入）”；
.button:active {
transform: scale(0.98) translateY(1px);
}
向下轻微移动并缩小，视觉上像被“压”下去了，松开后自动恢复。
适配移动端触摸
在移动设备上，:active 有时响应不及时。确保元素可触发状态：
- 给目标元素添加 cursor: pointer，有助于激活 :active
- 避免使用非交互标签（如 div）而不设 role 或 tabindex
- 必要时可额外用 JavaScript 添加/移除类名来兼容
过渡动画平滑的关键：transition
别忘了给原始状态加上 transition，否则 transform 会瞬间变化，失去动画感：
.button {
transition: transform 0.1s ease;
}
时间建议控制在 0.05s ~ 0.15s 之间，太长会显得迟钝，太短则不易察觉。
基本上就这些。合理使用 :active 和 transform，能让界面交互更细腻，又不增加复杂度。
