function rand(num,plus){
  return Math.floor((Math.random() * num) + plus);
};

for (var i = 1; i < 150; i++) {
  var starWH = rand(3,2);
  $('#sky').append('<div class="star" style="top:'+rand(100,1)+'%;left:'+rand(100,1)+'%;animation: star '+rand(20,5)+'s linear infinite;width:'+starWH+'px;height:'+starWH+'px;"><div>');
};

$(document).on('mousemove', function(e){
  $('.moon').css('top',e.pageY);
});

setInterval(function() {
  $('#sky').append('<div class="cloud" style="top:'+rand($(window).height(),1)+'px;animation-duration: '+rand(10,8)+'s;"></div>');
    $('.cloud').each(function(){
      if($(this).offset().left <= -200){
      $(this).remove();
    };
  });
}, 1500);
body{
  background: #160039;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.moon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: fade(#7A4273,20);
  width: 350px;
  height: 350px;
  border-radius: 50%;
  z-index: 9;
  &:after,&:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    border-radius: 50%;
  }
  &:after{
    width: 300px;
    height: 300px;
    background: #FFF;
    opacity: 1;
  }
  &:before{
    width: 400px;
    height: 400px;
    background: fade(#7A4273,20);
  }
}

.earth{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  width: 150%;
  height: 300px;
  background: #160039;
  border-radius: 50%;
}

.cloud{
  position: absolute;
  width: 200px;
  height: 30px;
  left: 130%;
  opacity: 0.1;
  border-radius: 50px;
  background: #fff;
  animation-name: cloud;
  &.left{left: -300px;}
}

#sky{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  .star{
    position: absolute;
    background: #CAC6D2;
    border-radius: 50%;
  }
}

@keyframes cloud {
  0% {left: 130%;}
  100% {left: -130%;}
}<div class="moon"></div>
<div class="earth"></div> 
<div id="sky"></div>