EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-radial-gradient(#44B3EB 20%, white);
}
.skybox {
  position: absolute;
  margin: auto;
  top:0; bottom:0; left:0; right:0;
  width:600px;
  height:400px;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}

.cloud {
  position: absolute;
  left:283px;
  bottom: 5%;
  width:283px;
  height:200px;
  z-index: 1;
  background: url(http://th05.deviantart.net/fs70/200H/i/2012/179/3/1/rd__s_cloud_by_misteraibo-d557zz3.png) no-repeat;
  -webkit-animation: scroll 3s 0s infinite linear;
}
.cloud:nth-child(2) {
  -webkit-animation: scroll 3s -1.5s infinite linear;
}

.rainbow {
  position: absolute;
  right:25%;
  bottom:35%;
  width:600px;
  height:200px;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
  -webkit-animation: dash 3s linear infinite;
}
.rainbow:nth-child(4) {
  -webkit-animation: dash 3s -1.5s linear infinite;
}

@-webkit-keyframes scroll{
  0%{
    left:-283px;
    -webkit-transform: scale(0.7);
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  30%{
    -webkit-transform: scale(1);
    opacity: 1;
  }
  80%{
    -webkit-transform: scale(1);
    opacity: 1;
  }
  100%{
    left:100%;
    -webkit-transform: scale(0.8);
    opacity: 0;
  }
}
@keyframes scroll{
  0%{
    left:-283px;
    transform: scale(0.7);
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  30%{
    transform: scale(1);
    opacity: 1;
  }
  80%{
    transform: scale(1);
    opacity: 1;
  }
  100%{
    left:100%;
    transform: scale(0.8);
    opacity: 0;
  }
}

@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 500;
    left:-283px;    
  }
  50%{
    stroke-dashoffset: -500;
  }
  100%{
    left:600px;
    stroke-dashoffset: -500;
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 500;
    left:-283px;    
  }
  50%{
    stroke-dashoffset: -500;
  }
  100%{
    left:600px;
    stroke-dashoffset: -500;
  }
}

HTML

Recommendation

Join Effecthub.com