CSS动画如何实现按钮悬停旋转_transform rotate @keyframes结合hover
按钮悬停时旋转可通过CSS实现：首先定义@keyframes rotateAnimation从0deg到360deg，再通过:hover触发animation: rotateAnimation 0.6s ease-in-out infinite alternate，配合transition确保过渡平滑，最终实现流畅的旋转效果。
要实现按钮在悬停时旋转，可以结合 CSS 的 @keyframes、transform: rotate() 和 :hover 伪类。以下是具体实现方式：
定义旋转动画 @keyframes
使用 @keyframes 创建一个名为rotateAnimation 的动画，从 0 度旋转到 360 度：
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
绑定 hover 触发动画
当鼠标悬停在按钮上时，通过 :hover 触发动画，并设置动画时长、缓动函数和播放次数：- animation: rotateAnimation 0.6s ease-in-out 表示播放一次旋转动画
- 添加 infinite 可让动画持续循环
- 使用 alternate 可实现来回旋转效果（可选）
优化体验与过渡
为避免生硬跳变，可同时保留 transition 作为备用动画方案。若不希望无限旋转，可移除 infinite：
.rotate-button:hover {
animation: rotateAnimation 0.6s ease-in-out;
}
这样就能实现一个自然流畅的悬停旋转按钮。基本上就这些，不
复杂但容易忽略细节。
