.wrap
  .mountain
  .horizon
    .glow
  .pattern
    .item
    .item
    .item
    .item
    .item
    .item
    .item
    .item
    .item
    .item
    .item
    .item
    .item
View Compiled
body{
  min-height: 500px;
  margin: 0;
}
.wrap{
 min-height: 500px;
 background-color: #000;
 position: relative;
 z-index: 1;
 overflow: hidden;
 display: block;
 width: 100%;
 height: 100%;
  &:after{
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(120, 120, 120, .6);
    position: absolute;
    z-index: 1;
  }
}

/*
* shooting star
*/

.animation-shootingStar{
	animation: shootingStar 5s cubic-bezier(0.65, 0, 0.18, 1.04) infinite .3s;
}

@keyframes shootingStar {
	0%{
      top: -30%;
      left: 17%;   
      height: 80px;
	}
	100%{
      top: 300px;
      left: 0%;
      height: 0;
	}
}


.animation-shootingStar_2{
	animation: shootingStar_2 5s cubic-bezier(0.65, 0, 0.18, 1.04) infinite .7s;
}

@keyframes shootingStar_2 {
	0%{
      top: -30%;
      left: 30%;  
      height: 80px;
	}
	100%{
      top: 100px;
      left: 20%;
      height: 0px;
	}
}

.animation-shootingStar_3{
	animation: shootingStar_3 1.4s cubic-bezier(0.65, 0, 0.18, 1.04) infinite 1.7s;
}

@keyframes shootingStar_3 {
	0%{
      top: -30%;
      left: 10%;
      height: 80px;
	}
	100%{
      top: 100px;
      left: 5%;
      height: 0px;
	}
}

.animation-shootingStar_4{
	animation: shootingStar_4 2s cubic-bezier(0.65, 0, 0.18, 1.04) infinite .1s;
}

@keyframes shootingStar_4 {
	0%{
      top: -30%;
      left: 50%;
      height: 80px;
	}
	100%{
      top: 300px;
      left: 40%;
      height: 0px;
	}
}


/*----------*/

.pattern{
  .item{
    width: 1px;
    height: 80px;
    background-color: #fff;
    position: absolute;
    top: -20%;
    left: 10px;
    transform: rotate(30deg);
    &:nth-of-type(2){
      width: 1px;
      height: 80px;
      background-color: #fff;
      left: 17%;
      @extend .animation-shootingStar;
    }
    &:nth-of-type(3){
      width: 1px;
      height: 80px;
      background-color: #fff;
      left: 30%;
      @extend .animation-shootingStar_2;
    }
    &:nth-of-type(4){
      width: 1px;
      height: 80px;
      background-color: #fff;
      left: 10%;
      @extend .animation-shootingStar_3;
    }
    &:nth-of-type(5){
      width: 1px;
      height: 80px;
      background-color: #fff;
      left: 50%;
      @extend .animation-shootingStar_4;
    }
    &:nth-of-type(6){
      width: 1px;
      height: 80px;
      background-color: #fff;
      left: 65%;
    }
    &:nth-of-type(7){
      width: 1px;
      height: 80px;
      background-color: #fff;
      left: 95%;
    }
    &:nth-of-type(8){
      width: 1px;
      height: 80px;
      background-color: #fff;
      left: 70%;
    }
  }
}


/*
* mountain 
*/

.mountain{
  display: block;
  background-color: green;
  width: 200%;
  height: 100%;
  position: absolute;
  left: -50%;
  bottom: -70%;
  z-index: 1;
  border-radius: 100%/100%;
}

.horizon{
  position: absolute;
  width: 160%;
  height: 70%;
  border-radius: 100%/100%;
  background: #038bff;
  -webkit-filter: blur(30px);
  left: 50%;
  bottom: -20%;
  margin-left: -80%;
  &:before{
    content: " ";
    position: absolute;
    width: 81.25%;
    height: 70%;
    border-radius: 100%/100%;
    background: #51AFFF;
    -webkit-filter: blur(30px);
    opacity: 0.6;
    margin-left: 9.375%;
  }
  &:after{
    content: " ";
    position: absolute;
    width: 32%;
    height: 20%;
    border-radius: 650px/350px;
    background: #B0DAFF;
    -webkit-filter: blur(30px);
    opacity: 0.5;
  }
  .glow{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%/100%;
    background: #215496;
    -webkit-filter: blur(200px);
    opacity: 0.7;
    top: -10%;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.