效果演示

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

代码

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>