旋转代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.rotate {
display: inline-block; /* 确保 transform 生效 */
animation: spin 2s linear infinite; /* 无限旋转 */
}
@keyframes spin {
0% {
transform: rotate(0deg); /* 起始角度 */
}
100% {
transform: rotate(360deg); /* 结束角度 */
}
}
</style>
</head>
<body>
<div class="rotate">旋</div>
</body>
</html>
鼠标悬停暂停
.rotate:hover {
animation-play-state: paused;
}
左右摇摆（如钟摆效果）
@keyframes swing {
0% { transform: rotate(-30deg); }
50% { transform: rotate(30deg); }
100% { transform: rotate(-30deg); }
}
.rotate {
animation: swing 1s ease-in-out infinite;
}
