q弹感本质是视觉反馈的节奏控制，核心靠transform:scale()配合transition实现；需用js监听touchstart/mousedown添加is-pressed类替代:active，松手时触发q-bounce动画实现过冲回弹。
用 CSS transform: scale() 实现按下缩放
按钮按下的 Q 弹感本质是视觉反馈的节奏控制，核心靠 transform: scale() 配合 transition 实现。别用 width/height 动画——会触发重排，卡顿明显；scale() 走 GPU 合成，更顺滑。
关键不是“缩放多少”，而是“缩放时机和回弹曲线”：
-
transform: scale(0.95)是较自然的按下值（0.9–0.97 之间都可，别低于 0.85，否则像塌陷） -
transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1)比默认ease更有弹性感：前慢后快，模拟回弹惯性 - 必须作用在
:active伪类上，且不能被user-select: none或pointer-events: none干扰
避免 :active 在移动端失效
移动端 Safari 和部分安卓浏览器对 :active 支持不稳定——轻点一下没反应，长按才触发，或压根不触发。这不是 bug，是浏览器为防误触做的延迟处理。
绕过方法只有一条可靠路径：用 JavaScript 监听 touchstart / mousedown，手动加 class：
button.addEventListener('mousedown', () => btn.classList.add('is-pressed'));
button.addEventListener('mouseup', () => btn.classList.remove('is-pressed'));
button.addEventListener('touchstart', (e) => {
e.preventDefault(); // 防止 iOS 300ms 延迟干扰触控响应
btn.classList.add('is-pressed');
});
button.addEventListener('touchend', () => btn.classList.remove('is-pressed'));
CSS 里写 .is-pressed { transform: scale(0.95); }，比纯 :active 兼容性高得多。
别让 scale 影响布局或子元素
transform: scale() 默认以元素中心为原点缩放。如果按钮内有图标、文字或绝对定位的 badge，可能错位或裁切。
解决方式分情况：
- 文字偏移？加
transform-origin: center（默认就是，但显式声明更稳） - 图标撑出边界？给按钮设
overflow: hidden，或把图标用position: relative+z-index控制层级 - 父容器有
flex或grid对齐？scale()不影响盒模型尺寸，但视觉上可能破坏对齐——此时建议用translateZ(0)强制硬件加速，而非依赖布局流
Q 弹感真正的难点在“松手瞬间”
很多人只做了按下缩放，松手时直接跳回原大小，毫无弹性。真正 Q 的感觉来自“松手后轻微过冲再回弹”，这需要 JS 配合 CSS 自定义动画。
简单方案（不引入库）：
@keyframes q-bounce {
0% { transform: scale(0.95); }
70% { transform: scale(1.03); } /* 过冲 */
100% { transform: scale(1); }
}
.is-pressed-released {
animation: q-bounce 0.25s cubic-bezier(0.2, 0.6, 0.4, 1);
}
在 mouseup/touchend 里先加 is-pressed，再立刻移除并加 is-pressed-released 类——注意用 setTimeout(() => ..., 0) 确保 DOM 重绘时机正确。
这个细节绝大多数人忽略：Q 弹不是“按下去弹”，而是“松开那一刹那的余震”。没它，就只是普通缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
