css制作旋转按钮
使用CSS制作旋转按钮
通过CSS的transform属性和动画关键帧（@keyframes）可以轻松实现旋转按钮效果。以下是两种常见方法：
方法1：使用transform: rotate()实现悬停旋转
通过:hover伪类触发旋转效果，适合鼠标悬停时动态反馈。
<button class="rotate-btn">悬停旋转</button>.rotate-btn {
padding: 10px 20px;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s ease; /* 平滑过渡效果 */
}
.rotate-btn:hover {
transform: rotate(360deg); /* 悬停时旋转360度 */
}方法2：使用@keyframes实现无限旋转
通过动画关键帧实现持续旋转，适合加载状态等场景。
<button class="infinite-rotate">无限旋转</button>.infinite-rotate {
padding: 10px 20px;
background: #e74c3c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
animation: spin 2s linear infinite; /* 无限循环旋转 */
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}可选调整参数
- 旋转速度：修改
animation-duration（如1s）或transition-duration。 - 旋转方向：使用
rotate(-360deg)实现逆时针旋转。 - 缩放效果：组合
scale()，例如transform: rotate(360deg) scale(1.1)。
注意事项
- 确保按钮有明确的交互提示（如
cursor: pointer）。 - 避免过度使用动画，以免影响用户体验。
- 如需兼容旧浏览器，可添加前缀如
-webkit-transform。
