//html
<div class="ellipse">
  <div class="animate"></div>
</div>


//css
body{
  background: #030c2b
}
.ellipse {
  position: relative;
  width: calc(50vh);
  height: calc(50vh);
  border: 1px solid rgba(43, 111, 253, .8);
  border-radius: 50%;
  z-index: 10;
  animation: spin 3s infinite linear;
}

.animate {
  position: absolute;
  left: calc(5vh);
  top: calc(7vh);
  transform: rotate(18deg);
  background: #58aee2; //最好用图片，用图片box-shadow和border-radius可以删掉
  width: 15px;
  height: 15px;
  border-radius: 100%;
  box-shadow: 0 0 20px -5px rgba(255, 255, 255, 0.7), 0 0 30px -10px rgba(255, 255, 255, 0.5), 0 0 50px -15px rgba(255, 255, 255, 0.3);
  animation: anti-spin 3s infinite linear;
}
@keyframes spin {
  0% {
    transform: rotate(20deg) scaleY(.5) rotate(0deg);
  }

  100% {
    transform: rotate(20deg) scaleY(.5) rotate(360deg);
  }
}

@keyframes anti-spin {
  0% {
    transform: rotate(0deg) scaleY(2) rotate(20deg) scale(1);
  }

  100% {
    transform: rotate(-360deg) scaleY(2) rotate(20deg) scale(1);
  }
}