在网页交互设计中，按钮悬停旋转是很常见的视觉效果，能够提升页面的动态感和用户操作反馈。实现这个效果不需要复杂的JavaScript逻辑，仅通过CSS原生动画属性就能完成，核心依赖transform rotate属性控制旋转角度，@keyframes定义动画过程，hover伪类触发动画执行。
核心实现原理
整个效果的实现分为三个部分，首先是定义按钮的基础样式，包括尺寸、颜色、边框等基础属性；其次是通过@keyframes定义旋转动画的关键帧，明确旋转的角度变化过程；最后是通过:hover伪类，在鼠标悬停到按钮上时，将定义好的旋转动画绑定到按钮元素上，同时使用transform: rotate()属性控制旋转的具体角度。
完整实现步骤
1. 定义按钮基础样式
先给按钮设置基础的显示样式，确保按钮在页面中有明确的视觉呈现，同时可以设置transition属性让样式变化更平滑，或者后续通过动画控制变化过程。
/* 按钮基础样式 */
.rotate-btn {
padding: 12px 24px;
font-size: 16px;
color: #fff;
background-color: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
/* 可选：设置过渡让非动画样式变化更平滑 */
transition: background-color 0.3s ease;
}
/* 悬停时背景色变化，增强反馈 */
.rotate-btn:hover {
background-color: #337ecc;
}
2. 定义旋转动画关键帧
使用@keyframes规则定义动画的名称和关键帧变化，这里我们需要实现旋转效果，所以关键帧中控制transform属性的rotate值变化即可。如果需要无限旋转可以设置from和to，如果需要固定角度旋转可以直接定义终点状态。
/* 定义旋转动画，名称为btn-rotate */
@keyframes btn-rotate {
/* 动画起始状态，旋转0度 */
from {
transform: rotate(0deg);
}
/* 动画结束状态，旋转360度，实现完整一圈旋转 */
to {
transform: rotate(360deg);
}
}
3. 绑定悬停触发逻辑
在按钮的:hover伪类中，通过animation属性将定义好的btn-rotate动画绑定到按钮上，设置动画的持续时间、运动曲线、执行次数等参数。如果希望鼠标移出后按钮回到初始状态，可以不设置animation-fill-mode: forwards，如果需要保持旋转后的状态可以添加该属性。
.rotate-btn:hover {
/* 绑定动画：动画名称 持续时间 运动曲线 延迟时间 执行次数 填充模式 */
animation: btn-rotate 0.6s ease-in-out 0s 1 normal;
/* 上面的animation是简写，也可以分开写：
animation-name: btn-rotate;
animation-duration: 0.6s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
*/
}
4. 完整HTML结构
将CSS样式和HTML按钮元素结合，就可以看到完整的悬停旋转效果，鼠标移动到按钮上时，按钮会顺时针旋转360度，鼠标移出后回到初始状态。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮悬停旋转示例</title>
<style>
.rotate-btn {
padding: 12px 24px;
font-size: 16px;
color: #fff;
background-color: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.rotate-btn:hover {
background-color: #337ecc;
animation: btn-rotate 0.6s ease-in-out 0s 1 normal;
}
@keyframes btn-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<button class="rotate-btn">悬停我旋转</button>
</body>
</html>
常见问题说明
- 如果希望鼠标移出后按钮慢慢转回初始状态，可以将动画改为
transition控制，在基础样式中添加transition: transform 0.6s ease-in-out，hover时设置transform: rotate(360deg)即可。 - 如果需要悬停时无限旋转，可以将动画的
animation-iteration-count设置为infinite，即animation: btn-rotate 0.6s linear infinite。 - 旋转中心默认是元素中心点，如果需要修改旋转中心，可以通过
transform-origin属性设置，比如transform-origin: left top会让元素从左上角开始旋转。
注意：使用transform属性做旋转时，不会影响元素在文档流中的原有位置，也不会触发页面的重排，性能比修改定位属性做旋转更好，适合频繁使用的交互效果。
CSS动画transform_rotate@keyframeshover修改时间：2026-07-08 06:54:23