SOURCE

<div style='top:-40px;left:0' class='liuxing a'></div>
<div style='top:10px;left:-370px' class='liuxing b'></div>
<div style='top:70px;left:-200px' class='liuxing d'></div>

body{
  background-image:url(http://localhost:8080/static/img/main_bg.fbb1e32.jpg)
}
.liuxing{
  position:absolute;
  width:60px;
  height:2px;
  box-shadow: 0 0 5px #fee;
  background:#fff;
  border-radius:50% 750% 750% 50%;
  opacity:.75;
  transform:rotateZ(-30deg);
  animation: move 1.5s ease-in 3s 3;
}
@keyframes move{
  0%{
    transform:translateX(492px) rotateZ(-30deg) translateY(0px);
    opacity:.75;
  }
  100%{
    transform:translateX(-200px) rotateZ(-30deg) translateY(400px);
    opacity:0;
  }
}
.a{
  animation-delay:7s;
  animation-duration:1.7s;
}
.b{
  animation-delay:3s;
  animation-duration:1.3s;
}
.c{
  animation-delay:1s;
  animation-duration:2s;
}
.d{
  animation-delay:5s;
  animation-duration:1s;
}