通过CSS @keyframes 定义动画，结合 transform: rotate() 和 scale() 实现按钮图标点击或悬停时的旋转缩放效果，使用 :hover 或 JavaScript 控制动画触发，可提升交互体验。
想让按钮图标在点击或悬停时产生旋转和缩放的动画效果，可以通过CSS的 @keyframes 配合 transform 中的 rotate 和 scale 属性来实现。这种方式无需JavaScript，简洁高效，适用于各种交互场景。
使用 @keyframes 创建一个命名动画，指定图标在动画过程中旋转角度和缩放比例的变化。
@keyframes spinAndGrow { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1.5); } }这个动画从无旋转、原始大小开始，到完成时旋转一圈并放大到1.5倍。
将定义好的动画绑定到按钮内的图标上，可以设置动画时长、缓动函数和触发方式。
立即学习“前端免费学习笔记（深入）”；
.button-icon { display: inline-block; animation: spinAndGrow 0.6s ease-in-out; }添加 display: inline-block 是为了让 transform 正常生效。你也可以结合 :hover 或通过JS控制类名来触发动画。
如果希望鼠标悬停时才播放动画，可以直接在伪类中应用：
.button-icon:hover { animation: spinAndGrow 0.6s ease-in-out forwards; }使用 forwards 可以让动画结束后保持最终状态。若要点击触发，可通过JavaScript动态添加类：
const icon = document.querySelector('.button-icon'); icon.addEventListener('click', () => { icon.style.animation = 'spinAndGrow 0.6s ease-in-out'; }); // 可选：动画结束后移除，以便重复触发 icon.addEventListener('animationend', () => { setTimeout(() => { icon.style.animation = ''; }, 500); });基本上就这些。通过组合 @keyframes、transform: rotate() 和 scale()，你可以轻松实现按钮图标的动感反馈，提升用户体验。不复杂但容易忽略细节，比如重置动画或控制播放次数。
以上就是CSS动画如何实现按钮图标旋转和缩放_transform rotate scale @keyframes结合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
653
收藏
