在网页交互设计中，圆形旋转动画常用于加载提示、头像装饰或品牌徽标动态展示。CSS3提供的@keyframes规则与animation属性，可以在不依赖JavaScript的情况下完成这一效果。实现思路是让元素围绕自身中心从0度旋转到360度，并无限循环，从而形成持续的圆周运动。
一、实现圆形旋转动画的核心原理
CSS3动画由两个部分组成：关键帧和动画绑定。关键帧使用@keyframes定义，描述动画在不同进度时的样式状态；动画绑定则通过animation简写属性将关键帧应用到具体元素上。对于圆形旋转，我们只需要在关键帧中改变transform: rotate()的值。
需要注意的是，元素默认围绕自身中心旋转，这由transform-origin: center保证。如果元素不是正方形，旋转时会呈现椭圆轨迹，因此通常要给旋转元素设定相等的宽和高。另外，为避免动画卡顿，可添加will-change: transform提示浏览器提前优化合成层。
1.1 关键帧写法
下面是一段最基础的旋转关键帧，它从初始状态旋转一周回到原点：
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
也可以写成百分比形式，方便在中间插入其他变化，例如缩放或变色，但纯旋转用from/to最直观。该关键帧可被页面中任意元素引用。
1.2 动画绑定属性
将动画绑定到类名为circle的元素，需要设置动画名称、单圈时间、速度曲线和循环次数：
.circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: #3498db;
animation: spin 2s linear infinite;
will-change: transform;
}
上述代码中，linear表示匀速旋转，infinite表示无限循环。若将infinite改为数字如3，则旋转三圈后停止。你也可以通过animation-play-state: paused在悬停时暂停。
二、完整可运行代码示例
以下示例包含一个红色圆形div，打开页面即可看到它持续旋转。你可以直接保存为html文件在浏览器中查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3圆形旋转动画</title>
<style>
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #e74c3c;
margin: 50px auto;
animation: spin 1.5s linear infinite;
will-change: transform;
}
.circle:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
这个例子中，鼠标悬停到圆形上会暂停旋转，移开恢复。利用悬停控制animation-play-state是常见的交互技巧，无需写一行JS。
三、常见调整与避坑
很多初学者发现旋转时元素抖动或不是正圆，通常是因为宽度和高度不一致，或者没有写border-radius: 50%。如果用了图片做旋转，请保证图片本身为正方形，或用容器包裹并限定尺寸。
另一个问题是旋转方向。默认顺时针，若想逆时针，可将to中的角度写为rotate(-360deg)，或单独设置animation-direction: reverse。下表列出几个常用动画参数：
| 属性 | 作用 | 示例值 |
|---|---|---|
| animation-duration | 单圈耗时 | 2s |
| animation-timing-function | 速度曲线 | linear |
| animation-iteration-count | 循环次数 | infinite |
| animation-direction | 旋转方向 | reverse |
合理利用这些参数，就能用纯CSS3快速制作出符合业务需求的圆形旋转动画，既轻量又易于维护。