css3 动画围绕圆转圈 |css类别选择器特点

.round {
width: 60px;
height: 60px;
background-color: #ff7f50;
border-radius: 50%;
position: relative;
animation: move 4s linear infinite;
}
@keyframes move {
0% {
transform: rotate(0deg) translate(150px) rotate(0deg);
}
25% {
transform: rotate(180deg) translate(150px) rotate(-180deg);
}
50% {
transform: rotate(360deg) translate(150px) rotate(-360deg);
}
75% {
transform: rotate(540deg) translate(150px) rotate(-540deg);
}
100% {
transform: rotate(720deg) translate(150px) rotate(-720deg);
}
}

代码解析：

大家首先定义一个圆形的 div，宽和高都为 60px，圆角为 50%，背景颜色为 #ff7f50。使用 position: relative; 把它定义为相对定位，方便下面的位移动画。

然后在 .round 中定义了一个动画 move，该动画会不断重复，持续时间为 4s，动画使用了线性运动。

接下来是动画的关键代码，@keyframes 定义 move 动画的关键帧。在 0% 时，div 元素通过 transform 属性向右位移 150px。接着，从 25% 到 100%，通过 rotate 和 translate 属性来实现围绕圆转圈的效果。在 25%，50%，75% 和 100% 这几个关键帧点，圆形 div 分别以 180、360、540 和 720 度的角度转动，并伴随着向内旋转的动画效果，这样就会形成围绕圆转圈的效果。

最后，大家就可以在 HTML 代码中使用这个类名，比如：<div class="round"></div>，使之产生效果。

这样就实现了一个简单的 CSS3 动画围绕圆转圈的效果，让页面更加生动有趣。