SOURCE

<div class="space"> 
  <div class="star-wrapper">
    <li class="star-0"></li>
    <li class="star-1"></li>
    <li class="star-2"></li>
    <li class="star-3"></li>
    <li class="star-4"></li>
    <li class="star-5"></li>
    <li class="star-6"></li>
    <li class="star-7"></li>
    <li class="star-8"></li>
    <li class="star-9"></li>
    <li class="star-10"></li>
    <li class="star-11"></li>
    <li class="star-12"></li>
    <li class="star-13"></li>
    <li class="star-14"></li>
    <li class="star-15"></li>
    <li class="star-16"></li>
    <li class="star-17"></li>
    <li class="star-18"></li>
    <li class="star-19"></li>
    <li class="star-20"></li>
    <li class="star-21"></li>
    <li class="star-22"></li>
    <li class="star-23"></li>
    <li class="star-24"></li>
    <li class="star-25"></li>
    <li class="star-26"></li>
    <li class="star-27"></li>
    <li class="star-28"></li>
    <li class="star-29"></li>
    <li class="star-30"></li>
    <li class="star-31"></li>
    <li class="star-32"></li>
    <li class="star-33"></li>
    <li class="star-34"></li>
    <li class="star-35"></li>
    <li class="star-36"></li>
    <li class="star-37"></li>
    <li class="star-38"></li>
    <li class="star-39"></li>
    <li class="star-40"></li>
    <li class="star-41"></li>
    <li class="star-42"></li>
    <li class="star-43"></li>
    <li class="star-44"></li>
    <li class="star-45"></li>
    <li class="star-46"></li>
    <li class="star-47"></li>
    <li class="star-48"></li>
    <li class="star-49"></li>
    <li class="star-50"></li>
    <li class="star-51"></li>
    <li class="star-52"></li>
    <li class="star-53"></li>
    <li class="star-54"></li>
    <li class="star-55"></li>
    <li class="star-56"></li>
    <li class="star-57"></li>
    <li class="star-58"></li>
    <li class="star-59"></li>
    <li class="star-60"></li>
    <li class="star-61"></li>
    <li class="star-62"></li>
    <li class="star-63"></li>
    <li class="star-64"></li>
    <li class="star-65"></li>
    <li class="star-66"></li>
    <li class="star-67"></li>
    <li class="star-68"></li>
    <li class="star-69"></li>
    <li class="star-70"></li>
    <li class="star-71"></li>
    <li class="star-72"></li>
    <li class="star-73"></li>
    <li class="star-74"></li>
    <li class="star-75"></li>
    <li class="star-76"></li>
    <li class="star-77"></li>
    <li class="star-78"></li>
    <li class="star-79"></li>
    <li class="star-80"></li>
    <li class="star-81"></li>
    <li class="star-82"></li>
    <li class="star-83"></li>
    <li class="star-84"></li>
    <li class="star-85"></li>
    <li class="star-86"></li>
    <li class="star-87"></li>
    <li class="star-88"></li>
    <li class="star-89"></li>
    <li class="star-90"></li>
    <li class="star-91"></li>
    <li class="star-92"></li>
    <li class="star-93"></li>
    <li class="star-94"></li>
    <li class="star-95"></li>
    <li class="star-96"></li>
    <li class="star-97"></li>
    <li class="star-98"></li>
    <li class="star-99"></li>
    <li class="star-100"></li>
    <li class="star-101"></li>
    <li class="star-102"></li>
    <li class="star-103"></li>
    <li class="star-104"></li>
    <li class="star-105"></li>
    <li class="star-106"></li>
    <li class="star-107"></li>
    <li class="star-108"></li>
    <li class="star-109"></li>
    <li class="star-110"></li>
    <li class="star-111"></li>
    <li class="star-112"></li>
    <li class="star-113"></li>
    <li class="star-114"></li>
    <li class="star-115"></li>
    <li class="star-116"></li>
    <li class="star-117"></li>
    <li class="star-118"></li>
    <li class="star-119"></li>
  </div>
  <div class="rocket-wrapper">   
    <div class="rocket">
      <div class="flame"> </div>
      <div class="exhaust"></div>
    </div>
  </div>
</div>

$space: #1b5565;
$stars: #f3ddbd;
$rocket-d: #ef4c00;
$rocket-l: #f9851c;
$flame: #f8c249;

$size: 400px;

body {
  background: darken($space, 12%);
  height: 100vh;
  min-height: 500px;
  min-width: 500px;
  margin: 0;
}

.space {
  height: 100%;
  min-height: 500px;
  min-width: 500px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-image: 
    radial-gradient(circle at center, lighten($space, 9%) 30%, transparent 30%),
    radial-gradient(circle at center, lighten($space, 6%) 40%, transparent 40%),
    radial-gradient(circle at center, lighten($space, 3%) 50%, transparent 50%),
    radial-gradient(circle at center, $space 60%, transparent 60%),
    radial-gradient(circle at center, darken($space, 3%) 70%, transparent 70%),
    radial-gradient(circle at center, darken($space, 6%) 80%, transparent 80%),
    radial-gradient(circle at center, darken($space, 9%) 90%, transparent 90%);
}

.rocket-wrapper {
  position: absolute;
  top: 37%;
  left: 40%;
  right: 50%;
  animation: fly 1s ease-in-out alternate infinite, take-off ease 1s 3;
}

.rocket {
  /* rocket body */
  position: relative;
  height: $size * .5;
  width: $size * .65;
  background: darken($rocket-l, 3%);  
  border-radius: 50% 100% 100% 50%;
  border-right: ($size * .03) solid lighten($rocket-l, 15%);
  box-sizing: border-box;
  background-image:
    /* reflection on whole ship */
    linear-gradient(to bottom, rgba(255, 255, 255, .15) 50%, transparent 50%),
    /* reflections on window */
    radial-gradient(circle at 60% 35%, lighten($space, 30%) 3%, transparent 3%),
    radial-gradient(circle at 70% 40%, lighten($space, 30%) 5%, transparent 5%),
    /* window glass */
    radial-gradient(circle at 65% 50%, lighten($space, 12%) 24%, transparent 24%),
    /* rivets on window rim*/
    radial-gradient(circle at 44.5% 50%, $rocket-l 2.1%, transparent 2.1%),
    radial-gradient(circle at 85.5% 50%, $rocket-l 1.5%, transparent 1.5%),
    radial-gradient(circle at 65% 75.5%, $rocket-l 1.8%, transparent 1.8%),
    radial-gradient(circle at 65% 24.5%, $rocket-l 1.8%, transparent 1.8%),
    radial-gradient(circle at 50% 32.5%, $rocket-l 1.8%, transparent 2%),
    radial-gradient(circle at 50% 67.5%, $rocket-l 1.8%, transparent 2%),
    radial-gradient(circle at 80% 32.5%, $rocket-l 1.5%, transparent 1.8%),
    radial-gradient(circle at 80% 67.5%, $rocket-l 1.5%, transparent 1.8%),
    /* window rim*/
    radial-gradient(circle at 65% 50%, lighten($rocket-d, 3%) 30%, transparent 30%),
    /* rivets on door */
    radial-gradient(circle at 55.5% 82%, $rocket-l 1.5%, transparent 1.5%),
    radial-gradient(circle at 75.5% 82%, $rocket-l 1.3%, transparent 1.3%),
    radial-gradient(circle at 55% 90%, $rocket-l 1.5%, transparent 1.5%),
    radial-gradient(circle at 76% 90%, $rocket-l 1.3%, transparent 1.3%),
    radial-gradient(circle at 54.5% 98%, $rocket-l 1.3%, transparent 1.3%),
    /* door under window */
    radial-gradient(circle at 65% 68%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 70%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 72%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 74%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 76%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 78%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 80%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 82%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 84%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 86%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 88%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 90%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 92%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 94%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 96%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 98%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 100%, $rocket-d 15%, transparent 15%),
    radial-gradient(circle at 65% 102%, $rocket-d 15%, transparent 15%),
    /* dark rivets near top*/
    radial-gradient(circle at 28% 20%, lighten($rocket-l, 10%) 1.5%, transparent 1.5%),
    radial-gradient(circle at 34% 20%, lighten($rocket-l, 10%) 1.5%, transparent 1.5%),
    radial-gradient(circle at 25% 13%, lighten($rocket-l, 10%) 1.5%, transparent 1.5%),
    radial-gradient(circle at 31% 13%, lighten($rocket-l, 10%) 1.5%, transparent 1.5%),
    radial-gradient(circle at 37% 13%, lighten($rocket-l, 10%) 1.5%, transparent 1.5%),
    /* rivets on bar */
    radial-gradient(circle at 17% 30%, $rocket-l 1.5%, transparent 1.5%),
    radial-gradient(circle at 17% 38%, $rocket-l 1.5%, transparent 1.5%),
    radial-gradient(circle at 17% 46%, $rocket-l 1.5%, transparent 1.5%),
    radial-gradient(circle at 17% 54%, $rocket-l 1.5%, transparent 1.5%),
    radial-gradient(circle at 17% 62%, $rocket-l 1.5%, transparent 1.5%),
    radial-gradient(circle at 17% 70%, $rocket-l 1.5%, transparent 1.5%),
    /* bar near the back */
    radial-gradient(circle at 17% 30%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 32%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 34%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 36%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 38%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 40%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 42%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 44%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 46%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 48%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 50%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 52%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 54%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 56%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 58%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 60%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 62%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 64%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 66%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 68%, $rocket-d 5%, transparent 5%),
    radial-gradient(circle at 17% 70%, $rocket-d 5%, transparent 5%)
    ;
  &:before, &:after {
    content: '';
    position: absolute;
    z-index: -1; 
  }
  &:before {
    /* rocket exhaust pipe */
    height: $size * .33;
    width: $size * .1;
    right: 98%;
    top: 17%;
    background: $rocket-d;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
    background-image:
      linear-gradient(to bottom, rgba(255, 255, 255, .15) 50%, transparent 50%);
  }
  &:after {
    /* rocket tip */
    bottom: 25%;
    left: 95%;   
    background: darken($rocket-l, 3%);
    height: $size * .25;
    width: $size * .2;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background-image: 
      linear-gradient(to bottom, rgba(255, 255, 255, .15) 50%, transparent 50%),
      radial-gradient(100% 120% at 10% 50%, $rocket-d 40%, transparent 40%),
      radial-gradient(circle at 10% 50%, transparent 50%, $rocket-d 50%);
  }
}

.flame {
  position: relative;
  width: $size * .16;
  height: $size * .16;
  top: 34%;
  right: 37%;
  z-index: -2;
  transform-origin: right;
  animation: flicker 1s infinite ease-out alternate;
  &:before, &:after {
    content: '';
    position: absolute;
    background: $flame; 
    border-radius: 50px 50px 50px 0px;
    transform: rotate(45deg);
  }
  &:before {
    /* large flame */
    bottom: 0;
    left: 0;
    width: $size * .16;
    height: $size * .16;   
    filter: drop-shadow(-($size * .01) ($size * .01) ($size * .03) $flame);
    background-image: 
      linear-gradient(135deg, $flame 50%, darken($flame, 8%) 50%);
  }
  &:after {
    /* little center flame*/
    bottom: 18%;
    right: 18%;
    width: $size * .1;
    height: $size * .1;   
    background-image: 
      linear-gradient(135deg, lighten($flame, 8%) 50%, $flame 50%);
  }
}

.exhaust {
  position: absolute;
  width: $size * .75;
  height: $size * .24;
  top: 26.5%;
  right: 100%;
  z-index: -3;
  transform-origin: right;
  // background-image: linear-gradient(to left, rgba(0,0,0,.05), rgba(255,255,255,.2), transparent);
  background: transparent;
  animation: exhaust 3s ease-in forwards;
}

@mixin one-star($scale) {
  list-style: none;
  filter: drop-shadow(0px 0px (($scale) + px) $stars);
  position: absolute;
  height: $scale * (5px);
  width: $scale * (4px);
  overflow: visible;
  &:before, &:after {
    content: '';
    position: absolute;
    background: $stars;
    border-radius: 50%;
  }
  &:before {
    height: $scale * (1px);
    width: $scale * (4px);
    top: 40%;
  }
  &:after {
    height: $scale * (5px);
    width: $scale * (1px);
    left: 37%;
  }
}

.star-wrapper {
  height: 100%;
  min-width: 500px;
  z-index: -3;
  @for $i from 0 to 120 {
    .star-#{$i} { 
      $twinkle-speed: random(5);
      $warp-delay: random(2) + 1;
      $warp-speed: random(15) + 2;
      @include one-star(random(5));
      top: random(100) * 1%;
      left: random(100) * 1%;
      animation: twinkle ($twinkle-speed + s) infinite alternate, warp-speed ($warp-speed + s) ($warp-delay + s) 2;
    }
  }
}

@keyframes twinkle {
  0% {
    filter: drop-shadow(0px 0px ((2) + px) $stars);
    transform: scale(.9);
  }
  50% {
    filter: drop-shadow(0px 0px ((6) + px) $stars);
    transform: scale(1);
  }
  100% {
    filter: drop-shadow(0px 0px ((2) + px) $stars);
    transform: scale(.9);
  }
}

@keyframes warp-speed {
  0% {
    transform: translate(0);
    opacity: 1;
  }
  50% {
    opacity: .2;
    transform: translate(-700px);
  }
  51% {
    opacity: 0;
    transform: translate(-700px);
  }
  52% {
    opacity: 0;
    transform: translate(700px);
  }
  53% {
    opacity: 1;
    transform: translate(700px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes flicker {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

@keyframes fly {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-15px);
	}
}


  @keyframes take-off {
    0% {
      transform: translateX(0px) translateY(0px);
    }
    20% {
      transform: translateX(3px) translateY(-15px);
    }
    40% {
      transform: translateX(-3px) translateY(0px);
    }
    60% {
      transform: translateX(0px) translateY(-15px);
    }
    80% {
      transform: translateX(3px) translateY(0px);
    }
    100% {
      transform: translateX(-3px) translateY(-15px);
    }
  }

@keyframes exhaust {
  from {
    width: 0;
    background-image: transparent;
  }
  to {
    width: $size * .75;
    background-image: linear-gradient(to left, rgba(0,0,0,.05), rgba(255,255,255,.2), transparent);
  }
}