17370845950

使用transform和@keyframes可实现按钮旋转动画：1. transform: rotate配合transition实现悬停平滑旋转；2. @keyframes定义关键帧实现持续旋转或摆动；3. 通过animation属性控制时长、方向、重复等行为；4. 建议用于加载提示，注意旋转中心、性能优化及减少动画偏好适配。

想让按钮在点击或悬停时产生旋转效果，CSS 提供了简单高效的方式：结合 transform: rotate() 与 @keyframes 配合 animation 属性来控制动画过程。这种方式无需 JavaScript，性能好，兼容性强。

1. 使用 transform: rotate 实现基础旋转

transform: rotate() 可以让元素绕其中心点旋转指定角度。比如让按钮默认旋转45度：

.button {
  transform: rotate(45deg);
}

这只会静态旋转，若要动态效果，需搭配 transition 实现平滑过渡，例如鼠标悬停时旋转：

.button {
  transition: transform 0.3s ease;
}
.button:hover {
transform: rotate(180deg);
}

这样按钮在鼠标移入时会顺滑地转半圈，移出时再转回来。

2. 使用 @keyframes 定义复杂旋转动画

如果需要更精细的控制，比如持续旋转、来回摆动或分阶段转动，应使用 @keyframes 定义关键帧动画。

例如实现一个无限循环的旋转加载效果：

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading-button {
animation: spin 1s linear infinite;
}

这个动画会让按钮持续匀速旋转，适合用在加载状态中。

3. 控制动画的播放时机与行为

通过 animation 的多个子属性，可以精确控制动画表现：

• animation-duration：动画持续时间，如 2s
• animation-timing-function：速度曲线，如 ease-in-out
• animation-delay：延迟多久开始
• animation-iteration-count：重复次数，infinite 表示无限
• animation-direction：方向，如 alternate 实现来回摆动
• animation-play-state：可控制暂停（paused）或运行（running）

例如让按钮点击时旋转并暂停动画，可通过 JS 切换 class 实现：

@keyframes swing {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}
.animated-button {
animation: swing 0.5s ease forwards;
}
.animated-button.paused {
animation-play-state: paused;
}

4. 实际应用建议

旋转动画适合用于加载提示、图标切换、交互反馈等场景。注意以下几点提升体验：

• 避免过度使用旋转，以免干扰用户注意力
• 配合 transform-origin 调整旋转中心点，如 left top
• 在移动端考虑动画对性能的影响，优先使用 will-change 或 translateZ 优化
• 为辅助功能考虑，可通过 prefers-reduced-motion 减少动画

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

基本上就这些。利用 transform rotate 和 @keyframes，你可以灵活实现各种按钮旋转效果，关键是理解动画流程和控制方式。不复杂但容易忽略细节。