纯CSS实现点击图标缩放需解决移动端:active不触发问题，须加ontouchstart=""或touch-action: manipulation，并配合transition: transform实现平滑动画。
纯 CSS 实现点击图标缩放，:active 在移动端默认不触发，必须加 ontouchstart="" 或 touch-action: manipulation 才能生效；缩放本身必须配 transition: transform，否则只是突变，不是动画。
为什么图标点了没反应？检查 :active 是否被激活
写好 .icon:active { transform: scale(1.2); } 却没效果，大概率是移动端根本没触发 :active。iOS Safari 默认对 <div>、<code><span></span> 这类非可交互元素延迟甚至忽略该伪类。
- 给图标元素加
ontouchstart=""（空字符串）——最轻量、兼容性最好 - 或加
touch-action: manipulation，显式声明它是可点击区域 - 如果是
<button></button>或带role="button" tabindex="0"的元素，通常不用额外处理 - 别依赖
cursor: pointer，它在 iOS 上基本无效
缩放动画卡顿或模糊？只动 transform，别碰 width/height
用 width 或 height 控制图标大小会强制浏览器重排（reflow），导致卡顿、边缘发虚、文字错位。缩放必须走 transform: scale() 路径。
- 务必显式写
transition: transform 0.15s ease-out，不能只写transition: all - 加
transform-origin: center防止缩放时图标“漂移”（默认原点虽是 center，但显式声明更稳） - 频繁交互的图标可加
will-change: transform，但别滥用——每个都加会吃内存 - 避免在
:active里改background-color或box-shadow，哪怕不触发布局，低端机仍可能感知卡顿
移动端点击后缩放一闪就没了？控制 transition 时长
iOS Safari 的 :active 状态持续时间极短（约 100ms），如果 transition 设成 0.3s，动画会被硬截断，看起来像“闪一下”。
立即学习“前端免费学习笔记（深入）”；
- 推荐
transition: transform 0.12s ease-out或0.15s cubic-bezier(0.34, 1.56, 0.64, 1)，兼顾响应感和弹性 - 别设超过
0.2s，否则用户松手前动画就结束了 - 如果需要“按住保持缩放”或“松手延迟回弹”，
:active不够用，必须切 JS +classList.toggle()
真正难搞的不是怎么写 scale，而是让 :active 在各种 WebView 里稳定触发——ontouchstart="" 是目前最靠谱的兜底方案，但得记得它只对直接子元素生效，父容器设了 pointer-events: none 或 overflow: hidden 会直接拦掉事件。
