<div class="sky">
  <div class="vane">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
<div class="ground"></div>
@import "compass/css3";

.sky, .ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 220px;
  background: green;
}

.sky {
  top: 0;
  bottom: auto;
  height: 75%;
  z-index: 1000;
  box-shadow: 0px 0px 10px rgba(254,252,234,1);
  border-bottom-right-radius: 50% 180px;
  border-bottom-left-radius: 50% 180px;
  background-color: rgb(1,74,127);
  -webkit-filter: brightness(0.2) grayscale(1);
  -moz-filter: brightness(0.2) grayscale(1);
  animation: darken-sky 60s;
@include filter-gradient(#014a7f, #d8b688, vertical);
@include background-image(linear-gradient(top,  rgba(1,74,127,1) 0%,rgba(1,72,124,1) 0%,rgba(1,83,139,1) 7%,rgba(0,100,152,1) 15%,rgba(0,118,166,1) 23%,rgba(0,115,169,1) 23%,rgba(0,118,168,1) 23%,rgba(1,118,172,1) 23%,rgba(0,114,166,1) 23%,rgba(0,118,168,1) 23%,rgba(0,130,179,1) 30%,rgba(0,132,180,1) 30%,rgba(2,147,192,1) 37%,rgba(7,145,192,1) 37%,rgba(9,147,194,1) 37%,rgba(10,146,194,1) 37%,rgba(9,154,199,1) 37%,rgba(0,142,188,1) 37%,rgba(51,163,203,1) 44%,rgba(44,162,198,1) 44%,rgba(43,159,200,1) 44%,rgba(46,159,199,1) 44%,rgba(46,164,202,1) 44%,rgba(76,175,206,1) 51%,rgba(74,173,205,1) 51%,rgba(82,175,208,1) 51%,rgba(77,176,207,1) 51%,rgba(109,187,209,1) 58%,rgba(104,186,207,1) 58%,rgba(139,200,205,1) 65%,rgba(136,196,204,1) 65%,rgba(138,199,204,1) 65%,rgba(163,203,195,1) 71%,rgba(158,199,193,1) 71%,rgba(161,202,198,1) 71%,rgba(159,199,191,1) 71%,rgba(177,200,180,1) 77%,rgba(179,204,183,1) 77%,rgba(180,204,182,1) 77%,rgba(178,203,182,1) 77%,rgba(176,201,180,1) 77%,rgba(192,195,164,1) 83%,rgba(195,199,166,1) 83%,rgba(194,197,166,1) 83%,rgba(211,182,140,1) 89%,rgba(209,185,141,1) 89%,rgba(208,179,135,1) 89%,rgba(215,183,136,1) 95%,rgba(213,181,134,1) 95%,rgba(213,179,133,1) 100%,rgba(213,179,133,1) 100%,rgba(216,182,136,1) 100%));

  &:after {
      content: '';
      display: block;
      position: absolute;
      opacity: 0.6;
      bottom: 0px;
      z-index: -10;
      left: 50%;
      margin-left: -30px;
      width: 60px;
      height: 0px;
      box-shadow: 0px 0px 0px 0px yellow;
      animation: sunset 60s;
      border-top-right-radius: 50% 100%;
      border-top-left-radius: 50% 100%;
      background-color: rgb(255,198,98);
@include filter-gradient(#ffc662, #f07c57, vertical);
@include background-image(linear-gradient(top,  rgba(255,198,98,1) 0%,rgba(253,203,90,1) 8%,rgba(255,194,91,1) 14%,rgba(255,176,91,1) 18%,rgba(252,165,88,1) 23%,rgba(255,171,94,1) 23%,rgba(252,157,89,1) 28%,rgba(250,153,84,1) 35%,rgba(255,158,93,1) 35%,rgba(255,146,90,1) 42%,rgba(249,138,85,1) 48%,rgba(254,143,90,1) 54%,rgba(254,143,90,1) 60%,rgba(253,142,87,1) 67%,rgba(249,131,91,1) 74%,rgba(246,129,86,1) 81%,rgba(244,126,86,1) 87%,rgba(245,127,87,1) 95%,rgba(240,124,87,1) 100%));

  }
}

.ground {
  height: 100%;
  z-index: 1;
  -webkit-filter: brightness(0.4) grayscale(0.5);
  -moz-filter: brightness(0.4) grayscale(0.5);
  animation: darken-ground 60s;
  box-shadow: inset 0px -1px 200px 10px rgba(0,0,0,0.5);
}

.vane {
  z-index: 10000;
  width: 50px;
  height: 50px;
  top: 100%;
  left: 100px;
  margin-top: -180px;
  margin-left: -25px;
  border-radius: 100%;
  position: absolute;
  
  > ul {
    animation: wave 10s infinite;
  }
  
  &:before {
      content: '';
      display: block;
      position: absolute;
      width: 120px;
      height: 4px;
      top: 101px;
      left: -93px;
      transform-origin: 100% 50%;
      transform: rotate(25deg);
      opacity: 0.1;
      animation: vane-shadow 60s;
      background: #222;
      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  }
  
  &:after {
      content: '';
      display: block;
      position: absolute;
      width: 4px;
      height: 80px;
      top: 50%;
      left: 50%;
      margin-left: -2px;
      background: #222;
      box-shadow: inset -1px 0px 2px 0px rgba(254,252,234,0.75);
  }
}

@mixin slice-background($red, $green, $blue, $opacity) {
  @include filter-gradient(rgba($red,$green,$blue,$opacity), #ffffff, horizontal);
  @include background-image(linear-gradient(45deg, rgba($red,$green,$blue,$opacity) 50%,rgba(255,255,255,0) 51%));
}

ul {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10000;
  
  > li {
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    transform-origin: 100% 100%;
    pointer-events: none;
    transition-delay: 0s;
    transition-property: transform;
    transition-duration: 3s;
    transition-timing-function: ease-in-out;

    &:nth-child(1) {
      transform: rotate(0deg);
      z-index: 8;
      @include slice-background(135,224,253,0.7);
    }
    
    &:nth-child(2) {
      transform: rotate(45deg);
      z-index: 7;
      @include slice-background(169,3,41,0.7);
    }
    
    &:nth-child(3) {
      transform: rotate(90deg);
      z-index: 6;
      @include slice-background(254,252,234,0.7);
    }
    
    &:nth-child(4) {
      transform: rotate(135deg);
      z-index: 5;
      @include slice-background(143,200,0,0.7);
    }
    
    &:nth-child(5) {
      transform: rotate(180deg);
      z-index: 4;
      @include slice-background(255,175,75,0.7);
    }
    
    &:nth-child(6) {
      transform: rotate(225deg);
      z-index: 3;
      @include slice-background(251,131,250,0.7);
    }
    
    &:nth-child(7) {
      transform: rotate(270deg);
      z-index: 2;
      @include slice-background(229,230,150,0.7);
    }
    
    &:nth-child(8) {
      transform: rotate(315deg);
      z-index: 1;
      @include slice-background(252,255,244,0.7);
    }
  }
}

.star {
  position: absolute;
  display: block;
  color: #ffe0bc;
  z-index: 100000;
  opacity: 0.25;
  width: 0px;
  height: 0px;
  border-right: 10px solid transparent;
  border-bottom: 7px  solid #ffe0bc;
  border-left: 10px solid transparent;
  animation: shine 5s infinite;
  transform: rotate(35deg) scale(0);
  transition: transform 5s;
  
  &.size1 {
    transform: rotate(35deg) scale(0.3);
  }
  
  &.size2 {
    transform: rotate(35deg) scale(0.4);
  }
  
  &.size3 {
    transform: rotate(35deg) scale(0.5);
  }
  
  &:before {
    border-bottom: 8px solid #ffe0bc;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -4.5px;
    left: -6.5px;
    display: block;
    content: '';
    transform: rotate(-35deg);
  }
    
  &:after {
    position: absolute;
    display: block;
    color: #ffe0bc;
    top: 0.3px;
    left: -10.5px;
    width: 0px;
    height: 0px;
    border-right: 10px solid transparent;
    border-bottom: 7px solid #ffe0bc;
    border-left: 10px solid transparent;
    transform: rotate(-70deg);
    content: '';
  }
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  65% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-720deg);
  }
}

@keyframes sunset {
  0% {
      margin-left: -40px;
      width: 80px;
      height: 10px;
      box-shadow: 0px -10px 200px 40px yellow;
  }
  90% {
      margin-left: -30px;
      width: 60px;
      height: 0px;
      box-shadow: 0px 0px 0px 0px yellow;
  }
  100% {
      margin-left: -30px;
      width: 60px;
      height: 0px;
      box-shadow: 0px 0px 0px 0px yellow;
  }
}

@keyframes vane-shadow {
  from {
    transform: rotate(-15deg);
    opacity: 0.5;
  }
  to {
    transform: rotate(25deg);
    opacity: 0.1;
  }
}

@keyframes darken-sky {
  from {
    -webkit-filter: brightness(1) grayscale(0);
  }
  to {
    -webkit-filter: brightness(0.2) grayscale(1);
  }
}

@keyframes darken-ground {
  from {
    -webkit-filter: brightness(1) grayscale(0);
  }
  to {
    -webkit-filter: brightness(0.4) grayscale(0.5);
  }
}

@keyframes shine {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(30deg);
  }
}
$(document).ready(function() {
  var skyWidth = $('.sky').width();
  var skyHeight = $('.sky').height()/2;
  var starDensity = Math.floor(skyWidth * skyHeight / 6000);

  for (var i = 0; i < starDensity; i++) {
    randomDelay = Math.floor((Math.random()*30)+20) * 1000;
    randomX = Math.floor((Math.random()*skyWidth));
    randomY = Math.floor((Math.random()*skyHeight));
    randomSize = Math.floor((Math.random()*3)+1);
    
    // some JavaScript closure
    setTimeout((function(randomX, randomY, randomSize) {
      return function() {
        // add a star to the sky
        var $newElem = $('<i class="star" style="top: '+randomY+'px; left: '+randomX+'px;"></i>').appendTo('body');
        
        // make it scale and shine
        setTimeout((function($newElem, randomSize) {
          return function() {
            $newElem.addClass('size'+randomSize);
          }
        })($newElem, randomSize),1);
      }
    })(randomX, randomY, randomSize), randomDelay);
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js