使用transform和@keyframes可实现按钮旋转动画：1. transform: rotate配合transition实现悬停平滑旋转；2. @keyframes定义关键帧实现持续旋转或摆动；3. 通过animation属性控制时长、方向、重复等行为；4. 建议用于加载提示，注意旋转中心、性能优化及减少动画偏好适配。
想让按钮在点击或悬停时产生旋转效果，CSS 提供了简单高效的方式：结合 transform: rotate() 与 @keyframes 配合 animation 属性来控制动画过程。这种方式无需 JavaScript，性能好，兼容性强。
transform: rotate() 可以让元素绕其中心点旋转指定角度。比如让按钮默认旋转45度：
.button {
transform: rotate(45deg);
}
这只会静态旋转，若要动态效果，需搭配 transition 实现平滑过渡，例如鼠标悬停时旋转：
.button {
transition: transform 0.3s ease;
}
<p>.button:hover {
transform: rotate(180deg);
}</p>这样按钮在鼠标移入时会顺滑地转半圈，移出时再转回来。
立即学习“前端免费学习笔记（深入）”；
如果需要更精细的控制，比如持续旋转、来回摆动或分阶段转动，应使用 @keyframes 定义关键帧动画。
例如实现一个无限循环的旋转加载效果：
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<p>.loading-button {
animation: spin 1s linear infinite;
}</p>这个动画会让按钮持续匀速旋转，适合用在加载状态中。
通过 animation 的多个子属性，可以精确控制动画表现：
例如让按钮点击时旋转并暂停动画，可通过 JS 切换 class 实现：
@keyframes swing {
0% { transform: rotate(0deg); }
50% { transform: rotate(30deg); }
100% { transform: rotate(0deg); }
}
<p>.animated-button {
animation: swing 0.5s ease forwards;
}</p><p>.animated-button.paused {
animation-play-state: paused;
}</p>旋转动画适合用于加载提示、图标切换、交互反馈等场景。注意以下几点提升体验：
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
基本上就这些。利用 transform rotate 和 @keyframes，你可以灵活实现各种按钮旋转效果，关键是理解动画流程和控制方式。不复杂但容易忽略细节。
以上就是CSS动画如何实现按钮旋转效果_transform rotate @keyframes控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
508
收藏
