今天我们来学习如何使用CSS实现环形动图，首先我们先来看一下实现效果。
效果图如下：
接下来我们开始编写代码，首先我们需要先创建一个DIV，然后在其中创建两个SPAN。

html
<div class="circle">
<span class="left"></span>
<span class="right"></span>
</div>

接下来我们使用CSS来为环形动图设置样式。

css
.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f5f5f5;
overflow: hidden;
}
<br>
.circle span {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #f00;
transform-origin: center center;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}

在上面的代码中，我们首先为.circle设置了宽度、高度等基本样式。接下来我们为.circle span设置了宽度、高度、背景色等基本样式。此外我们使用了transform-origin属性来设置旋转的原点，因为我们需要的是以中心点旋转。
现在的样式只是左半部分，我们还需要为右半部分的样式。

css
.circle .left {
z-index: 2;
transform: rotate(0deg);
}
<br>
.circle .right {
z-index: 1;
transform: rotate(180deg);
background-color: #00f;
}

在上面的代码中，我们分别为左半部分和右半部分设置了z-index属性，这样就可以让左半部分在上面，右半部分在下面。我们还为.right设置了背景色。同时，我们使用了transform属性来旋转左半部分和右半部分。
看起来已经可以显示一个很不错的效果了，但是我们想要的是能够不停地旋转。因此我们需要使用CSS3的动画效果。

css
.circle .right {
/* 省略了一些样式代码 */
animation: spin 4s linear infinite;
}
<br>
@keyframes spin {
0% {
transform: rotate(180deg)
}
100% {
transform: rotate(540deg)
}
}

在上面的代码中，我们使用了animation属性，设置了动画效果。同时，我们使用了@keyframes关键字，定义了动画与起始状态和结束状态。这样，环形动图就完成了。
最终代码如下：

html
<pre>
<div class="circle">
<span class="left"></span>
<span class="right"></span>
</div>

.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f5f5f5;
overflow: hidden;
}
<br>
.circle span {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #f00;
transform-origin: center center;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
}
<br>
.circle .left {
z-index: 2;
transform: rotate(0deg);
}
<br>
.circle .right {
z-index: 1;
transform: rotate(180deg);
background-color: #00f;
animation: spin 4s linear infinite;
}
<br>
@keyframes spin {
0% {
transform: rotate(180deg)
}
100% {
transform: rotate(540deg)
}
}

是不是非常简单呢？赶紧试试吧~