CSS如何实现社交图标在鼠标悬停时通过过渡进行弹性缩放效果？

本文共计779个文字，预计阅读时间需要4分钟。

直接改+ width 或 height 触发 layout，动画卡顿且不支持硬件加速；transform: scale() 只影响绘制层，性能好、过渡平滑。

• 写法必须是 transition: transform 0.2s ease，不能漏掉 transform
• 别写成 transition: all 0.2s —— 会把 color、opacity 等无关属性也拖进过渡队列，增加渲染负担
• scale 值建议控制在 1.1～1.3 之间，超过 1.4 在小图标上容易糊边或触发字体重排

:hover 伪类里别漏掉 display 或 pointer-events 的副作用

有些图标用 <svg> 或 <i> 包裹，如果父容器用了 display: inline-block，悬停时 scale 可能导致文字基线偏移、相邻元素跳动。