css3 animation 实现点绕圈 转圈效果

要使用CSS3动画实现点围绕圆形轨迹移动的效果，可以使用@keyframes规则来定义动画，并使用animation属性应用到点上。以下是实现这种效果的示例代码：

HTML:

<div class="container">
  <div class="point"></div>
</div>

CSS:

.container {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid #000;
  border-radius: 50%;
  margin: 50px;
}
 
.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  animation: rotate 5s linear infinite;
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}

在这个例子中，.point是要绕着.container的边缘移动的点，@keyframes rotate定义了点如何移动。translateX(100px)将点移到圆的中心，然后通过rotate应用额外的旋转，使得点看起来像是在圆内旋转。动画设置为无限循环，每5秒完成一次完整旋转。