EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  background: #050505;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.square {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}

.square:nth-child(1) {
  background: white;
  width: 10px;
  height: 10px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #fcfcfc;
  -moz-box-shadow: 0px 0px 5px 0px #fcfcfc;
  -o-box-shadow: 0px 0px 5px 0px #fcfcfc;
  box-shadow: 0px 0px 5px 0px #fcfcfc;
  -webkit-animation: rotation 1s infinite linear;
  animation: rotation 1s infinite linear;
  z-index: 49;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(2) {
  background: gray;
  width: 20px;
  height: 20px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #7d7d7d;
  -moz-box-shadow: 0px 0px 5px 0px #7d7d7d;
  -o-box-shadow: 0px 0px 5px 0px #7d7d7d;
  box-shadow: 0px 0px 5px 0px #7d7d7d;
  -webkit-animation: rotation 2s infinite linear;
  animation: rotation 2s infinite linear;
  z-index: 48;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(3) {
  background: #555555;
  width: 30px;
  height: 30px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #525252;
  -moz-box-shadow: 0px 0px 5px 0px #525252;
  -o-box-shadow: 0px 0px 5px 0px #525252;
  box-shadow: 0px 0px 5px 0px #525252;
  -webkit-animation: rotation 3s infinite linear;
  animation: rotation 3s infinite linear;
  z-index: 47;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(4) {
  background: #404040;
  width: 40px;
  height: 40px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #3d3d3d;
  -moz-box-shadow: 0px 0px 5px 0px #3d3d3d;
  -o-box-shadow: 0px 0px 5px 0px #3d3d3d;
  box-shadow: 0px 0px 5px 0px #3d3d3d;
  -webkit-animation: rotation 4s infinite linear;
  animation: rotation 4s infinite linear;
  z-index: 46;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(5) {
  background: #333333;
  width: 50px;
  height: 50px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #303030;
  -moz-box-shadow: 0px 0px 5px 0px #303030;
  -o-box-shadow: 0px 0px 5px 0px #303030;
  box-shadow: 0px 0px 5px 0px #303030;
  -webkit-animation: rotation 5s infinite linear;
  animation: rotation 5s infinite linear;
  z-index: 45;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(6) {
  background: #2b2b2b;
  width: 60px;
  height: 60px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #282828;
  -moz-box-shadow: 0px 0px 5px 0px #282828;
  -o-box-shadow: 0px 0px 5px 0px #282828;
  box-shadow: 0px 0px 5px 0px #282828;
  -webkit-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
  z-index: 44;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(7) {
  background: #242424;
  width: 70px;
  height: 70px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #222222;
  -moz-box-shadow: 0px 0px 5px 0px #222222;
  -o-box-shadow: 0px 0px 5px 0px #222222;
  box-shadow: 0px 0px 5px 0px #222222;
  -webkit-animation: rotation 7s infinite linear;
  animation: rotation 7s infinite linear;
  z-index: 43;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(8) {
  background: #202020;
  width: 80px;
  height: 80px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #1d1d1d;
  -moz-box-shadow: 0px 0px 5px 0px #1d1d1d;
  -o-box-shadow: 0px 0px 5px 0px #1d1d1d;
  box-shadow: 0px 0px 5px 0px #1d1d1d;
  -webkit-animation: rotation 8s infinite linear;
  animation: rotation 8s infinite linear;
  z-index: 42;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(9) {
  background: #1c1c1c;
  width: 90px;
  height: 90px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #1a1a1a;
  -moz-box-shadow: 0px 0px 5px 0px #1a1a1a;
  -o-box-shadow: 0px 0px 5px 0px #1a1a1a;
  box-shadow: 0px 0px 5px 0px #1a1a1a;
  -webkit-animation: rotation 9s infinite linear;
  animation: rotation 9s infinite linear;
  z-index: 41;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(10) {
  background: #1a1a1a;
  width: 100px;
  height: 100px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #171717;
  -moz-box-shadow: 0px 0px 5px 0px #171717;
  -o-box-shadow: 0px 0px 5px 0px #171717;
  box-shadow: 0px 0px 5px 0px #171717;
  -webkit-animation: rotation 10s infinite linear;
  animation: rotation 10s infinite linear;
  z-index: 40;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(11) {
  background: #171717;
  width: 110px;
  height: 110px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #151515;
  -moz-box-shadow: 0px 0px 5px 0px #151515;
  -o-box-shadow: 0px 0px 5px 0px #151515;
  box-shadow: 0px 0px 5px 0px #151515;
  -webkit-animation: rotation 11s infinite linear;
  animation: rotation 11s infinite linear;
  z-index: 39;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(12) {
  background: #151515;
  width: 120px;
  height: 120px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #131313;
  -moz-box-shadow: 0px 0px 5px 0px #131313;
  -o-box-shadow: 0px 0px 5px 0px #131313;
  box-shadow: 0px 0px 5px 0px #131313;
  -webkit-animation: rotation 12s infinite linear;
  animation: rotation 12s infinite linear;
  z-index: 38;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(13) {
  background: #141414;
  width: 130px;
  height: 130px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #111111;
  -moz-box-shadow: 0px 0px 5px 0px #111111;
  -o-box-shadow: 0px 0px 5px 0px #111111;
  box-shadow: 0px 0px 5px 0px #111111;
  -webkit-animation: rotation 13s infinite linear;
  animation: rotation 13s infinite linear;
  z-index: 37;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(14) {
  background: #121212;
  width: 140px;
  height: 140px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #101010;
  -moz-box-shadow: 0px 0px 5px 0px #101010;
  -o-box-shadow: 0px 0px 5px 0px #101010;
  box-shadow: 0px 0px 5px 0px #101010;
  -webkit-animation: rotation 14s infinite linear;
  animation: rotation 14s infinite linear;
  z-index: 36;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(15) {
  background: #111111;
  width: 150px;
  height: 150px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #0e0e0e;
  -moz-box-shadow: 0px 0px 5px 0px #0e0e0e;
  -o-box-shadow: 0px 0px 5px 0px #0e0e0e;
  box-shadow: 0px 0px 5px 0px #0e0e0e;
  -webkit-animation: rotation 15s infinite linear;
  animation: rotation 15s infinite linear;
  z-index: 35;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(16) {
  background: #101010;
  width: 160px;
  height: 160px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #0d0d0d;
  -moz-box-shadow: 0px 0px 5px 0px #0d0d0d;
  -o-box-shadow: 0px 0px 5px 0px #0d0d0d;
  box-shadow: 0px 0px 5px 0px #0d0d0d;
  -webkit-animation: rotation 16s infinite linear;
  animation: rotation 16s infinite linear;
  z-index: 34;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(17) {
  background: #0f0f0f;
  width: 170px;
  height: 170px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #0c0c0c;
  -moz-box-shadow: 0px 0px 5px 0px #0c0c0c;
  -o-box-shadow: 0px 0px 5px 0px #0c0c0c;
  box-shadow: 0px 0px 5px 0px #0c0c0c;
  -webkit-animation: rotation 17s infinite linear;
  animation: rotation 17s infinite linear;
  z-index: 33;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(18) {
  background: #0e0e0e;
  width: 180px;
  height: 180px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #0c0c0c;
  -moz-box-shadow: 0px 0px 5px 0px #0c0c0c;
  -o-box-shadow: 0px 0px 5px 0px #0c0c0c;
  box-shadow: 0px 0px 5px 0px #0c0c0c;
  -webkit-animation: rotation 18s infinite linear;
  animation: rotation 18s infinite linear;
  z-index: 32;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(19) {
  background: #0d0d0d;
  width: 190px;
  height: 190px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #0b0b0b;
  -moz-box-shadow: 0px 0px 5px 0px #0b0b0b;
  -o-box-shadow: 0px 0px 5px 0px #0b0b0b;
  box-shadow: 0px 0px 5px 0px #0b0b0b;
  -webkit-animation: rotation 19s infinite linear;
  animation: rotation 19s infinite linear;
  z-index: 31;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(20) {
  background: #0d0d0d;
  width: 200px;
  height: 200px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #0a0a0a;
  -moz-box-shadow: 0px 0px 5px 0px #0a0a0a;
  -o-box-shadow: 0px 0px 5px 0px #0a0a0a;
  box-shadow: 0px 0px 5px 0px #0a0a0a;
  -webkit-animation: rotation 20s infinite linear;
  animation: rotation 20s infinite linear;
  z-index: 30;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(21) {
  background: #0c0c0c;
  width: 210px;
  height: 210px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #0a0a0a;
  -moz-box-shadow: 0px 0px 5px 0px #0a0a0a;
  -o-box-shadow: 0px 0px 5px 0px #0a0a0a;
  box-shadow: 0px 0px 5px 0px #0a0a0a;
  -webkit-animation: rotation 21s infinite linear;
  animation: rotation 21s infinite linear;
  z-index: 29;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(22) {
  background: #0c0c0c;
  width: 220px;
  height: 220px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #090909;
  -moz-box-shadow: 0px 0px 5px 0px #090909;
  -o-box-shadow: 0px 0px 5px 0px #090909;
  box-shadow: 0px 0px 5px 0px #090909;
  -webkit-animation: rotation 22s infinite linear;
  animation: rotation 22s infinite linear;
  z-index: 28;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(23) {
  background: #0b0b0b;
  width: 230px;
  height: 230px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #090909;
  -moz-box-shadow: 0px 0px 5px 0px #090909;
  -o-box-shadow: 0px 0px 5px 0px #090909;
  box-shadow: 0px 0px 5px 0px #090909;
  -webkit-animation: rotation 23s infinite linear;
  animation: rotation 23s infinite linear;
  z-index: 27;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(24) {
  background: #0b0b0b;
  width: 240px;
  height: 240px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #080808;
  -moz-box-shadow: 0px 0px 5px 0px #080808;
  -o-box-shadow: 0px 0px 5px 0px #080808;
  box-shadow: 0px 0px 5px 0px #080808;
  -webkit-animation: rotation 24s infinite linear;
  animation: rotation 24s infinite linear;
  z-index: 26;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(25) {
  background: #0a0a0a;
  width: 250px;
  height: 250px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #080808;
  -moz-box-shadow: 0px 0px 5px 0px #080808;
  -o-box-shadow: 0px 0px 5px 0px #080808;
  box-shadow: 0px 0px 5px 0px #080808;
  -webkit-animation: rotation 25s infinite linear;
  animation: rotation 25s infinite linear;
  z-index: 25;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(26) {
  background: #0a0a0a;
  width: 260px;
  height: 260px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #070707;
  -moz-box-shadow: 0px 0px 5px 0px #070707;
  -o-box-shadow: 0px 0px 5px 0px #070707;
  box-shadow: 0px 0px 5px 0px #070707;
  -webkit-animation: rotation 26s infinite linear;
  animation: rotation 26s infinite linear;
  z-index: 24;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(27) {
  background: #090909;
  width: 270px;
  height: 270px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #070707;
  -moz-box-shadow: 0px 0px 5px 0px #070707;
  -o-box-shadow: 0px 0px 5px 0px #070707;
  box-shadow: 0px 0px 5px 0px #070707;
  -webkit-animation: rotation 27s infinite linear;
  animation: rotation 27s infinite linear;
  z-index: 23;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(28) {
  background: #090909;
  width: 280px;
  height: 280px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #070707;
  -moz-box-shadow: 0px 0px 5px 0px #070707;
  -o-box-shadow: 0px 0px 5px 0px #070707;
  box-shadow: 0px 0px 5px 0px #070707;
  -webkit-animation: rotation 28s infinite linear;
  animation: rotation 28s infinite linear;
  z-index: 22;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(29) {
  background: #090909;
  width: 290px;
  height: 290px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #060606;
  -moz-box-shadow: 0px 0px 5px 0px #060606;
  -o-box-shadow: 0px 0px 5px 0px #060606;
  box-shadow: 0px 0px 5px 0px #060606;
  -webkit-animation: rotation 29s infinite linear;
  animation: rotation 29s infinite linear;
  z-index: 21;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(30) {
  background: #090909;
  width: 300px;
  height: 300px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #060606;
  -moz-box-shadow: 0px 0px 5px 0px #060606;
  -o-box-shadow: 0px 0px 5px 0px #060606;
  box-shadow: 0px 0px 5px 0px #060606;
  -webkit-animation: rotation 30s infinite linear;
  animation: rotation 30s infinite linear;
  z-index: 20;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(31) {
  background: #080808;
  width: 310px;
  height: 310px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #060606;
  -moz-box-shadow: 0px 0px 5px 0px #060606;
  -o-box-shadow: 0px 0px 5px 0px #060606;
  box-shadow: 0px 0px 5px 0px #060606;
  -webkit-animation: rotation 31s infinite linear;
  animation: rotation 31s infinite linear;
  z-index: 19;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(32) {
  background: #080808;
  width: 320px;
  height: 320px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #050505;
  -moz-box-shadow: 0px 0px 5px 0px #050505;
  -o-box-shadow: 0px 0px 5px 0px #050505;
  box-shadow: 0px 0px 5px 0px #050505;
  -webkit-animation: rotation 32s infinite linear;
  animation: rotation 32s infinite linear;
  z-index: 18;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(33) {
  background: #080808;
  width: 330px;
  height: 330px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #050505;
  -moz-box-shadow: 0px 0px 5px 0px #050505;
  -o-box-shadow: 0px 0px 5px 0px #050505;
  box-shadow: 0px 0px 5px 0px #050505;
  -webkit-animation: rotation 33s infinite linear;
  animation: rotation 33s infinite linear;
  z-index: 17;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(34) {
  background: #080808;
  width: 340px;
  height: 340px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #050505;
  -moz-box-shadow: 0px 0px 5px 0px #050505;
  -o-box-shadow: 0px 0px 5px 0px #050505;
  box-shadow: 0px 0px 5px 0px #050505;
  -webkit-animation: rotation 34s infinite linear;
  animation: rotation 34s infinite linear;
  z-index: 16;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(35) {
  background: #070707;
  width: 350px;
  height: 350px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #050505;
  -moz-box-shadow: 0px 0px 5px 0px #050505;
  -o-box-shadow: 0px 0px 5px 0px #050505;
  box-shadow: 0px 0px 5px 0px #050505;
  -webkit-animation: rotation 35s infinite linear;
  animation: rotation 35s infinite linear;
  z-index: 15;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(36) {
  background: #070707;
  width: 360px;
  height: 360px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #050505;
  -moz-box-shadow: 0px 0px 5px 0px #050505;
  -o-box-shadow: 0px 0px 5px 0px #050505;
  box-shadow: 0px 0px 5px 0px #050505;
  -webkit-animation: rotation 36s infinite linear;
  animation: rotation 36s infinite linear;
  z-index: 14;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(37) {
  background: #070707;
  width: 370px;
  height: 370px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #040404;
  -moz-box-shadow: 0px 0px 5px 0px #040404;
  -o-box-shadow: 0px 0px 5px 0px #040404;
  box-shadow: 0px 0px 5px 0px #040404;
  -webkit-animation: rotation 37s infinite linear;
  animation: rotation 37s infinite linear;
  z-index: 13;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(38) {
  background: #070707;
  width: 380px;
  height: 380px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #040404;
  -moz-box-shadow: 0px 0px 5px 0px #040404;
  -o-box-shadow: 0px 0px 5px 0px #040404;
  box-shadow: 0px 0px 5px 0px #040404;
  -webkit-animation: rotation 38s infinite linear;
  animation: rotation 38s infinite linear;
  z-index: 12;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(39) {
  background: #070707;
  width: 390px;
  height: 390px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #040404;
  -moz-box-shadow: 0px 0px 5px 0px #040404;
  -o-box-shadow: 0px 0px 5px 0px #040404;
  box-shadow: 0px 0px 5px 0px #040404;
  -webkit-animation: rotation 39s infinite linear;
  animation: rotation 39s infinite linear;
  z-index: 11;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(40) {
  background: #060606;
  width: 400px;
  height: 400px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #040404;
  -moz-box-shadow: 0px 0px 5px 0px #040404;
  -o-box-shadow: 0px 0px 5px 0px #040404;
  box-shadow: 0px 0px 5px 0px #040404;
  -webkit-animation: rotation 40s infinite linear;
  animation: rotation 40s infinite linear;
  z-index: 10;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(41) {
  background: #060606;
  width: 410px;
  height: 410px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #040404;
  -moz-box-shadow: 0px 0px 5px 0px #040404;
  -o-box-shadow: 0px 0px 5px 0px #040404;
  box-shadow: 0px 0px 5px 0px #040404;
  -webkit-animation: rotation 41s infinite linear;
  animation: rotation 41s infinite linear;
  z-index: 9;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(42) {
  background: #060606;
  width: 420px;
  height: 420px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #040404;
  -moz-box-shadow: 0px 0px 5px 0px #040404;
  -o-box-shadow: 0px 0px 5px 0px #040404;
  box-shadow: 0px 0px 5px 0px #040404;
  -webkit-animation: rotation 42s infinite linear;
  animation: rotation 42s infinite linear;
  z-index: 8;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(43) {
  background: #060606;
  width: 430px;
  height: 430px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #030303;
  -moz-box-shadow: 0px 0px 5px 0px #030303;
  -o-box-shadow: 0px 0px 5px 0px #030303;
  box-shadow: 0px 0px 5px 0px #030303;
  -webkit-animation: rotation 43s infinite linear;
  animation: rotation 43s infinite linear;
  z-index: 7;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(44) {
  background: #060606;
  width: 440px;
  height: 440px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #030303;
  -moz-box-shadow: 0px 0px 5px 0px #030303;
  -o-box-shadow: 0px 0px 5px 0px #030303;
  box-shadow: 0px 0px 5px 0px #030303;
  -webkit-animation: rotation 44s infinite linear;
  animation: rotation 44s infinite linear;
  z-index: 6;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(45) {
  background: #060606;
  width: 450px;
  height: 450px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #030303;
  -moz-box-shadow: 0px 0px 5px 0px #030303;
  -o-box-shadow: 0px 0px 5px 0px #030303;
  box-shadow: 0px 0px 5px 0px #030303;
  -webkit-animation: rotation 45s infinite linear;
  animation: rotation 45s infinite linear;
  z-index: 5;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(46) {
  background: #060606;
  width: 460px;
  height: 460px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #030303;
  -moz-box-shadow: 0px 0px 5px 0px #030303;
  -o-box-shadow: 0px 0px 5px 0px #030303;
  box-shadow: 0px 0px 5px 0px #030303;
  -webkit-animation: rotation 46s infinite linear;
  animation: rotation 46s infinite linear;
  z-index: 4;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(47) {
  background: #050505;
  width: 470px;
  height: 470px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #030303;
  -moz-box-shadow: 0px 0px 5px 0px #030303;
  -o-box-shadow: 0px 0px 5px 0px #030303;
  box-shadow: 0px 0px 5px 0px #030303;
  -webkit-animation: rotation 47s infinite linear;
  animation: rotation 47s infinite linear;
  z-index: 3;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(48) {
  background: #050505;
  width: 480px;
  height: 480px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #030303;
  -moz-box-shadow: 0px 0px 5px 0px #030303;
  -o-box-shadow: 0px 0px 5px 0px #030303;
  box-shadow: 0px 0px 5px 0px #030303;
  -webkit-animation: rotation 48s infinite linear;
  animation: rotation 48s infinite linear;
  z-index: 2;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(49) {
  background: #050505;
  width: 490px;
  height: 490px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #030303;
  -moz-box-shadow: 0px 0px 5px 0px #030303;
  -o-box-shadow: 0px 0px 5px 0px #030303;
  box-shadow: 0px 0px 5px 0px #030303;
  -webkit-animation: rotation 49s infinite linear;
  animation: rotation 49s infinite linear;
  z-index: 1;
}

@-webkit-keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.square:nth-child(50) {
  background: #050505;
  width: 500px;
  height: 500px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=$color, Direction=NaN, Strength=5);
  -webkit-box-shadow: 0px 0px 5px 0px #030303;
  -moz-box-shadow: 0px 0px 5px 0px #030303;
  -o-box-shadow: 0px 0px 5px 0px #030303;
  box-shadow: 0px 0px 5px 0px #030303;
  -webkit-animation: rotation 50s infinite linear;
  animation: rotation 50s infinite linear;
  z-index: 0;
}

HTML

Recommendation

Join Effecthub.com