CSS3+画圆动画

.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FF5722;
animation: circleRotate 2s linear infinite;
}
@keyframes circleRotate{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

CSS3提供了我们许多强大的动画效果，让网页变得更加美观动感。其中，画圆动画可以给我们带来很多惊喜。

我们首先需要通过border-radius属性来定义元素为圆形。然后，添加background-color属性来设置圆形的颜色。接着，我们就可以通过CSS3动画来实现画圆动画的效果了。

这里我们选取了animation、keyframes、transform等CSS3新特性来定义画圆动画。我们在circleRotate中创建了两个关键帧：0%和100%。通过设置初始状态和结束状态，我们可以使整个元素在2秒内顺时针旋转360度，达到画圆的效果。

最后，我们将class为.circle的元素添加画圆动画即可。