EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

html,
body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-perspective: 25px;
          perspective: 25px;
  overflow: hidden;
  background-color: #1c1c1c;
}
.wrapper .square {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, -100px);
  -ms-transform: translate3d(-50%, -50%, -100px);
  transform: translate3d(-50%, -50%, -100px);
  opacity: 0;
  width: 40%;
  height: 0;
  padding-bottom: 40%;
  border: 2px solid #138379;
  box-shadow: 0px 60px 140px #19A598;
  -webkit-backface-visibility: hidden;
}
.wrapper .square.square-1 {
  -webkit-animation: move-animation 12s infinite -400ms;
  animation: move-animation 12s infinite -400ms;
}
.wrapper .square.square-2 {
  -webkit-animation: move-animation 12s infinite -800ms;
  animation: move-animation 12s infinite -800ms;
}
.wrapper .square.square-3 {
  -webkit-animation: move-animation 12s infinite -1200ms;
  animation: move-animation 12s infinite -1200ms;
}
.wrapper .square.square-4 {
  -webkit-animation: move-animation 12s infinite -1600ms;
  animation: move-animation 12s infinite -1600ms;
}
.wrapper .square.square-5 {
  -webkit-animation: move-animation 12s infinite -2000ms;
  animation: move-animation 12s infinite -2000ms;
}
.wrapper .square.square-6 {
  -webkit-animation: move-animation 12s infinite -2400ms;
  animation: move-animation 12s infinite -2400ms;
}
.wrapper .square.square-7 {
  -webkit-animation: move-animation 12s infinite -2800ms;
  animation: move-animation 12s infinite -2800ms;
}
.wrapper .square.square-8 {
  -webkit-animation: move-animation 12s infinite -3200ms;
  animation: move-animation 12s infinite -3200ms;
}
.wrapper .square.square-9 {
  -webkit-animation: move-animation 12s infinite -3600ms;
  animation: move-animation 12s infinite -3600ms;
}
.wrapper .square.square-10 {
  -webkit-animation: move-animation 12s infinite -4000ms;
  animation: move-animation 12s infinite -4000ms;
}
.wrapper .square.square-11 {
  -webkit-animation: move-animation 12s infinite -4400ms;
  animation: move-animation 12s infinite -4400ms;
}
.wrapper .square.square-12 {
  -webkit-animation: move-animation 12s infinite -4800ms;
  animation: move-animation 12s infinite -4800ms;
}
.wrapper .square.square-13 {
  -webkit-animation: move-animation 12s infinite -5200ms;
  animation: move-animation 12s infinite -5200ms;
}
.wrapper .square.square-14 {
  -webkit-animation: move-animation 12s infinite -5600ms;
  animation: move-animation 12s infinite -5600ms;
}
.wrapper .square.square-15 {
  -webkit-animation: move-animation 12s infinite -6000ms;
  animation: move-animation 12s infinite -6000ms;
}
.wrapper .square.square-16 {
  -webkit-animation: move-animation 12s infinite -6400ms;
  animation: move-animation 12s infinite -6400ms;
}
.wrapper .square.square-17 {
  -webkit-animation: move-animation 12s infinite -6800ms;
  animation: move-animation 12s infinite -6800ms;
}
.wrapper .square.square-18 {
  -webkit-animation: move-animation 12s infinite -7200ms;
  animation: move-animation 12s infinite -7200ms;
}
.wrapper .square.square-19 {
  -webkit-animation: move-animation 12s infinite -7600ms;
  animation: move-animation 12s infinite -7600ms;
}
.wrapper .square.square-20 {
  -webkit-animation: move-animation 12s infinite -8000ms;
  animation: move-animation 12s infinite -8000ms;
}
.wrapper .square.square-21 {
  -webkit-animation: move-animation 12s infinite -8400ms;
  animation: move-animation 12s infinite -8400ms;
}
.wrapper .square.square-22 {
  -webkit-animation: move-animation 12s infinite -8800ms;
  animation: move-animation 12s infinite -8800ms;
}
.wrapper .square.square-23 {
  -webkit-animation: move-animation 12s infinite -9200ms;
  animation: move-animation 12s infinite -9200ms;
}
.wrapper .square.square-24 {
  -webkit-animation: move-animation 12s infinite -9600ms;
  animation: move-animation 12s infinite -9600ms;
}
.wrapper .square.square-25 {
  -webkit-animation: move-animation 12s infinite -10000ms;
  animation: move-animation 12s infinite -10000ms;
}
.wrapper .square.square-26 {
  -webkit-animation: move-animation 12s infinite -10400ms;
  animation: move-animation 12s infinite -10400ms;
}
.wrapper .square.square-27 {
  -webkit-animation: move-animation 12s infinite -10800ms;
  animation: move-animation 12s infinite -10800ms;
}
.wrapper .square.square-28 {
  -webkit-animation: move-animation 12s infinite -11200ms;
  animation: move-animation 12s infinite -11200ms;
}
.wrapper .square.square-29 {
  -webkit-animation: move-animation 12s infinite -11600ms;
  animation: move-animation 12s infinite -11600ms;
}
.wrapper .square.square-30 {
  -webkit-animation: move-animation 12s infinite -12000ms;
  animation: move-animation 12s infinite -12000ms;
}
@-webkit-keyframes move-animation {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -50%, -100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 40px);
  }
}
@keyframes move-animation {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -50%, -100px);
            transform: translate3d(-50%, -50%, -100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 40px);
            transform: translate3d(-50%, -50%, 40px);
  }
}

HTML

Recommendation

Join Effecthub.com