使用transform: scale()配合transition实现图标悬停平滑放大，需设置display: inline-block、transform-origin: center center，并在:hover时应用scale(1.2)，通过transition控制动画过渡，可选cubic-bezier调整缓动效果。
想让图标在鼠标悬停时平滑放大，可以用 transform: scale() 搭配 transition 实现。核心思路是通过 CSS 控制元素的缩放比例，并添加过渡动画让变化更自然。
通常使用一个 <i> 或 <span> 标签展示图标，比如用 Font Awesome：
<i class="icon fa fa-heart"></i>默认状态下图标为原始大小（scale(1)），并确保缩放以中心点进行：
.icon {transform-origin: center center 很关键，避免图标偏移或抖动。
立即学习“前端免费学习笔记（深入）”；
当鼠标悬停时，将图标放大 1.2 倍：
.icon:hover {transition 属性会让这个缩放过程变得平滑，而不是瞬间跳变。
可以换不同的缓动函数让动画更有感觉：
例如：
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);基本上就这些。只要设置好初始状态、过渡属性和 hover 缩放，就能轻松实现图标放大动画。不复杂但容易忽略 transform-origin 和 display 类型的影响。
以上就是CSS过渡如何实现图标放大动画_transform scale与transition组合使用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
468
收藏
