点击后图标从中心弹出的CSS动画需用transform: scale()与opacity组合，配合cubic-bezier(0.68, -0.55, 0.27, 1.55)实现弹性入场，避免transition: all，应分别为transform和opacity设置独立时长与缓动，并注意焦点管理、热区优化及SVG渲染清晰度。
点击后图标从中心弹出的 CSS 动画怎么写
直接用 transform: scale() + opacity 做入场动画，但关键在「弹性」——CSS 的 cubic-bezier(0.68, -0.55, 0.27, 1.55) 比默认 ease-out 更有回弹感。别用 transition: all，它会让 transform 和 opacity 同步开始，失去层次感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个图标加独立
transition：比如transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55)，opacity 0.3s ease-in - 初始状态设为
transform: scale(0) translate(0, 0)，展开时按顺序加translateX()和translateY()偏移 - 用
visibility: hidden配合opacity: 0，避免缩放为 0 时仍占点击区域
JavaScript 控制展开/收起状态时容易漏掉什么
常见错误是只切 class，但没处理按钮焦点和键盘可访问性。用户按空格或回车触发后，面板展开，但焦点没移到第一个图标上，屏幕阅读器就卡住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
aria-expanded="true/false"同步更新主按钮的属性 - 收起时主动调用
button.focus()，展开后用icons[0].focus() - 监听
Escape键：在展开态下按 Esc 应自动收起并返回焦点到主按钮 - 避免用
display: none切换面板，改用hidden属性或visibility: hidden+pointer-events: none
移动端点击区域太小导致误触怎么办
图标本身只有 24×24px，但 iOS Safari 要求最小点击区域 44×44px，否则触发延迟或失效。单纯放大图标会破坏布局，得在不改变视觉的前提下扩大热区。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个图标外层包一层
span，设padding: 10px，再用overflow: hidden保持圆角裁剪 - 用
@media (hover: none) and (pointer: coarse)单独加大移动端padding - 禁用
-webkit-tap-highlight-color: transparent，否则 iOS 点击反馈消失，用户不确定是否点中 - 避免在图标上直接绑
click，统一用事件委托到父容器，防止快速连点重复触发
SVG 图标在动画中模糊或抖动怎么修复
Chrome 和 Safari 下，transform: scale() 缩放 SVG 时若坐标不是整数像素，会出现抗锯齿模糊甚至轻微抖动。这不是 bug，是亚像素渲染的副作用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有 SVG 的
viewBox宽高设为偶数（如viewBox="0 0 24 24"），且内部路径锚点对齐像素网格 - 动画过程中强制硬件加速：
transform: scale(...) translateZ(0) - 加
shape-rendering="crispEdges"属性，对线条类图标有效；对图标整体加image-rendering: -webkit-optimize-contrast - 不要用
width/height缩放 SVG，始终用transform，否则 viewBox 重计算会加剧模糊
