html, body { height: 100%; }

body {

  background:radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, #000 100%);

  overflow: hidden;

}

​

.ocean { 

  height: 5%;

  width:100%;

  position:absolute;

  bottom:0;

  left:0;

  background: #30cfd0;

}

​

.wave {

  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x; 

  position: absolute;

  top: -198px;

  width: 6400px;

  height: 198px;

  animation: wave 8s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;

  transform: translate3d(0, 0, 0);

}

​

.wave:nth-of-type(2) {

  top: -175px;

  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;

  opacity: 1;

}

.wave:nth-of-type(3) {

  top: -225px;

  animation: wave 6s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;

  opacity: 1;

}

​

@keyframes wave {

  0% {

    margin-left: 0;

  }

  100% {

    margin-left: -1600px;

  }

}

​

@keyframes swell {

  0%, 100% {

    transform: translate3d(0,-25px,0);

  }

  50% {

    transform: translate3d(0,5px,0);

  }

}

.stars {

  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;

}

​

​

​