[CSS] CSS 实现小球环绕效果

效果演示

视频未审核通过, 后面在上传

代码

CSS

  .container {
      width: 10rem;
      height: 10rem;
  }
  .planet {
      width: 5rem;
      height: 5rem;
      border: 2px solid rgb(65, 127, 235);
      border-radius: 50%;
      position: absolute;
      left: -0.1rem;
      top: -0.3rem;
  }
  .ball {
      width: 0.5rem;
      height:  0.5rem;
      background-color: #008c8c;
      border-radius: 50%;
      position: absolute;
      left: 0.5rem;
      top: 0.5rem;
  }
  @keyframes planet-rotate {  0% {    transform:  scaleY(0.5) rotate(0);  }  100% {    transform:  scaleY(0.5) rotate(360deg);  }}
  
  @keyframes self-rotate {  0% {    transform: rotate(0) scaleY(2);  }  100% {    transform: rotate(-360deg) scaleY(2);  }}
  
  .planet {  
      animation: planet-rotate 10s linear infinite;
  }
  
  .ball { 
      animation: self-rotate 10s linear infinite;
  }

HTML

  <div class="container">
       <div class="planet">
           <div class="ball"></div>
       </div>
  </div>