Night Sky

by Wil Chow

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='night-sky'>
  <div class='star twinkle-star-1'></div>
  <div class='star twinkle-star-2'></div>
  <div class='star twinkle-star-3'></div>
  <div class='star twinkle-star-4'></div>
  <div class='star twinkle-star-5'></div>
  <div class='star twinkle-star-6'></div>
  <div class='star twinkle-star-7'></div>
  <div class='star twinkle-star-8'></div>
  <div class='star twinkle-star-9'></div>
  <div class='star twinkle-star-10'></div>
  <div class='star twinkle-star-11'></div>
  <div class='star twinkle-star-12'></div>
  <div class='star twinkle-star-13'></div>
  <div class='star twinkle-star-14'></div>
  <div class='star twinkle-star-15'></div>
  <div class='star twinkle-star-16'></div>
  <div class='star twinkle-star-17'></div>
  <div class='star twinkle-star-18'></div>
  <div class='star twinkle-star-19'></div>
  <div class='star twinkle-star-20'></div>
  <div class='star twinkle-star-21'></div>
  <div class='star twinkle-star-22'></div>
  <div class='star twinkle-star-23'></div>
  <div class='star twinkle-star-24'></div>
  <div class='star twinkle-star-25'></div>
  <div class='star twinkle-star-26'></div>
  <div class='star twinkle-star-27'></div>
  <div class='star twinkle-star-28'></div>
  <div class='star twinkle-star-29'></div>
  <div class='star twinkle-star-30'></div>
  <div class='star twinkle-star-31'></div>
  <div class='star twinkle-star-32'></div>
  <div class='star twinkle-star-33'></div>
  <div class='star twinkle-star-34'></div>
  <div class='star twinkle-star-35'></div>
  <div class='star twinkle-star-36'></div>
  <div class='star twinkle-star-37'></div>
  <div class='star twinkle-star-38'></div>
  <div class='star twinkle-star-39'></div>
  <div class='star twinkle-star-40'></div>
  <div class='star twinkle-star-41'></div>
  <div class='star twinkle-star-42'></div>
  <div class='star twinkle-star-43'></div>
  <div class='star twinkle-star-44'></div>
  <div...

CSS

html {
  height: 100%;
  width: 100%;
  position: relative;
}

.night-sky {
  display: block;
  position: absolute;
  background: #111;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.star {
  width: 2px;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 3px #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
}

.twinkle-star-1 {
  width: 2px;
  height: 2px;
  left: 50%;
  top: 35%;
  -webkit-animation: twinkle 0.5s alternate infinite;
          animation: twinkle 0.5s alternate infinite;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.twinkle-star-2 {
  width: 3px;
  height: 3px;
  left: 15%;
  top: 69%;
  -webkit-animation: twinkle 0.75s alternate infinite;
          animation: twinkle 0.75s alternate infinite;
  -webkit-animation-delay: 4.6s;
          animation-delay: 4.6s;
}

.twinkle-star-3 {
  width: 3px;
  height: 3px;
  left: 97%;
  top: 82%;
  -webkit-animation: twinkle 0.75s alternate infinite;
          animation: twinkle 0.75s alternate infinite;
  -webkit-animation-delay: 0.84536s;
          animation-delay: 0.84536s;
}

.twinkle-star-4 {
  width: 2px;
  height: 2px;
  left: 32%;
  top: 27%;
  -webkit-animation: twinkle 0.5s alternate infinite;
          animation: twinkle 0.5s alternate infinite;
  -webkit-animation-delay: 0.84375s;
          animation-delay: 0.84375s;
}

.twinkle-star-5 {
  width: 2px;
  height: 2px;
  left: 31%;
  top: 47%;
  -webkit-animation: twinkle 0.5s alternate infinite;
          animation: twinkle 0.5s alternate infinite;
  -webkit-animation-delay: 1.51613s;
          animation-delay: 1.51613s;
}

.twinkle-star-6 {
  width: 3px;
  height: 3px;
  left: 70%;
  top: 11%;
  -webkit-animation: twinkle 0.75s alternate infinite;
          animation: twinkle 0.75s alternate infinite;
  -webkit-animation-delay: 0.15714s;
          animation-delay: 0.15714s;
}

.twinkle-star-7 {
  width: 2px;
  height: 2px;
  left: 60%;
  top: 31%;
  -webkit-animation: twinkle...