1 动画效果

最终实现效果如下

2 画圆原理

(1) 初始化一个宽高200px的div

                                            
<div class="box"></div>
                                            
                                        

                                            
.box{
  width: 200px;
  height:200px;
  background: white;
}
                                            
                                        

(2) 通过css调整为有边框背景透明的圆

                                            
.box{
  width: 200px;
  height:200px;
  background: transparent;
  color: white;
  border:10px solid #00d9ff;
  border-radius: 50%;
  position:relative;
}
                                            
                                        

3 画一个小球

(1) 通过伪元素before实现一个小球，首先初始化一个宽高30px的小球

                                            
.box:before{
  content: "";
  width:30px;
  height:30px;
  background: rgb(255, 132, 0);
  border-radius: 50%; 
  position: absolute;
}
                                            
                                        

伪元素必须定义content和position:absolute两个属性；content保证内容显示，absolute保证相对于自身元素的定位

(2) 调整一下定位的位置

                                            
top:10px;
  left:10px;
                                            
                                        

4 让小球旋转起来

本质原理是旋转整个元素；初始位置为0deg，结束位置在360deg

(1) 定义动画关键帧

                                            
@keyframes round{
  0%{
    rotate: 0deg;
  }
  100%{
    rotate: 360deg;
  }
}
                                            
                                        

(2) 引用动画帧，并定义动画过渡过程：3s匀速无限播放即可

                                            
animation:round 3s linear infinite;