Night sky

by sungsoonz

HTML

<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>

CSS

/* ============================================================================================== 
SED Innovations
https://sed.am
https://mkrtchyan.ga
================================================================================================= */
* {
  margin: 0;
  padding: 0;
}

header {
  background-color: rgba(33, 33, 33, 0.9);
  color: #ffffff;
  display: block;
  font: 14px/1.3 Arial, sans-serif;
  height: 50px;
  position: relative;
  z-index: 5;
}


@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 5000px;
  }
}


@keyframes move-clouds-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 10000px 0;
  }
}


.stars,
.twinkling,
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stars {
  background: #000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index: 0;
}

.twinkling {
  background: transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index: 1;
  animation: move-twink-back 200s linear infinite;
}

.clouds {
  background: transparent url(http://www.script-tutorials.com/demos/360/images/clouds3.png) repeat top center;
  z-index: 3;
  animation: move-clouds-back 200s linear infinite;
}