用 JavaScript 监听 mousedown/touchstart 切换 pressed 类实现可靠缩放，配合 cubic-bezier 缓动；需同时处理 mouse 与 touch 事件并 preventDefault；弹性回弹用 @keyframes + offsetHeight 重置动画；注意可访问性、prefers-reduced-motion 适配及业务状态同步。
点击按钮时触发 CSS 缩放动画，用 :active 最简单但有局限
直接给按钮加 :active { transform: scale(0.95); } 能实现“按下去变小”的效果，但这是瞬时响应、无缓动、松手立刻回弹，且在移动端常因 300ms 延迟或 touch 事件未绑定而失效。
更可靠的做法是用 JavaScript 监听 mousedown / touchstart，配合 CSS 过渡：
- 给按钮加
class="cart-btn"，并在 CSS 中定义：.cart-btn { transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .cart-btn.pressed { transform: scale(0.92); } - JS 中监听并切换 class：
const btn = document.querySelector('.cart-btn'); btn.addEventListener('mousedown', () => btn.classList.add('pressed')); btn.addEventListener('mouseup', () => btn.classList.remove('pressed')); btn.addEventListener('touchstart', (e) => { e.preventDefault(); btn.classList.add('pressed'); }); btn.addEventListener('touchend', () => btn.classList.remove('pressed')); - 注意：必须同时处理 mouse 和 touch 事件，否则 iOS Safari 点击无反馈；
e.preventDefault()防止 touchstart 触发滚动或默认行为
要“弹性按压”，得用 @keyframes + transform 模拟物理回弹
CSS 的 cubic-bezier(0.25, 0.46, 0.45, 0.94) 已接近弹性感，但真要模拟弹簧式回弹（先压过再弹回），需用关键帧动画。注意：这不是给按钮加 hover 或 active 动画，而是每次点击都播放一次独立动画。
- 定义动画：
@keyframes pressBounce { 0% { transform: scale(1); } 50% { transform: scale(0.88); } 75% { transform: scale(0.94); } 100% { transform: scale(1); } } - JS 中每次点击触发：
btn.addEventListener('click', () => { btn.classList.remove('pressed'); btn.style.animation = 'none'; btn.offsetHeight; // 强制重排，重置动画状态 btn.style.animation = 'pressBounce 0.35s ease-out'; }); - 关键点：
offsetHeight是重置动画的常用 trick，否则连续点击动画不触发；ease-out让回弹段更舒缓，比 linear 更像弹性
购物车按钮缩放动画别忽略语义和可访问性
纯视觉动画不影响功能，但若按钮本身没有 role="button" 或 tabindex，键盘用户（Tab 切换）或屏幕阅读器可能跳过它；缩放还可能引起布局偏移，导致误点。
立即学习“前端免费学习笔记（深入）”；
- 确保按钮是原生
<button></button>，不是<div> 或 <code><a></a>伪装 —— 后者需手动加role="button" tabindex="0"并监听Enter/Space - 缩放时用
transform: scale()，不要改width/height，避免触发布局重排（reflow）影响性能 - 在 prefers-reduced-motion 开启时禁用动画：
@media (prefers-reduced-motion: reduce) { .cart-btn { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } - 点击后立即缩放 + 禁用按钮：
btn.disabled = true，防止重复提交 - API 成功后，再恢复按钮并可选加个微动提示（如
scale(1.1) → scale(1)表示添加成功） - 失败时记得还原按钮状态，并给出明确错误提示，而不是只让缩放动画白跑一趟
真实项目中，缩放动画常和加入购物车逻辑耦合，别漏掉状态反馈
用户点下按钮后，真正“加入成功”往往有延迟（API 请求），此时仅靠缩放动画会让人误以为已生效。缩放只是交互确认，不是业务完成信号。
