通过CSS @keyframes 定义动画，结合 transform: rotate() 和 scale() 实现按钮图标点击或悬停时的旋转缩放效果，使用 :hover 或 JavaScript 控制动画触发，可提升交互体验。
想让按钮图标在点击或悬停时产生旋转和缩放的动画效果，可以通过CSS的 @keyframes 配合 transform 中的 rotate 和 scale 属性来实现。这种方式无需JavaScript，简洁高效，适用于各种交互场景。
定义关键帧动画 @keyframes
使用 @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控制类名来触发动画。
配合 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()，你可以轻松实现按钮图标的动感反馈，提升用户体验。不复杂但容易忽略细节，比如重置动画或控制播放次数。
