EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

@-webkit-keyframes background-bottom {
  0% {
    fill: #3F8264;
  }
  10% {
    fill: #4A9775;
  }
  20% {
    fill: #54AB84;
  }
  30% {
    fill: #6EBD8E;
  }
  40% {
    fill: #8FC78E;
  }
  50% {
    fill: #ABD18F;
  }
  60% {
    fill: #8FC78E;
  }
  70% {
    fill: #6EBD8E;
  }
  80% {
    fill: #54AB84;
  }
  90% {
    fill: #4A9775;
  }
  100% {
    fill: #3F8264;
  }
}
@-moz-keyframes background-bottom {
  0% {
    fill: #3F8264;
  }
  10% {
    fill: #4A9775;
  }
  20% {
    fill: #54AB84;
  }
  30% {
    fill: #6EBD8E;
  }
  40% {
    fill: #8FC78E;
  }
  50% {
    fill: #ABD18F;
  }
  60% {
    fill: #8FC78E;
  }
  70% {
    fill: #6EBD8E;
  }
  80% {
    fill: #54AB84;
  }
  90% {
    fill: #4A9775;
  }
  100% {
    fill: #3F8264;
  }
}
@-o-keyframes background-bottom {
  0% {
    fill: #3F8264;
  }
  10% {
    fill: #4A9775;
  }
  20% {
    fill: #54AB84;
  }
  30% {
    fill: #6EBD8E;
  }
  40% {
    fill: #8FC78E;
  }
  50% {
    fill: #ABD18F;
  }
  60% {
    fill: #8FC78E;
  }
  70% {
    fill: #6EBD8E;
  }
  80% {
    fill: #54AB84;
  }
  90% {
    fill: #4A9775;
  }
  100% {
    fill: #3F8264;
  }
}
@keyframes background-bottom {
  0% {
    fill: #3F8264;
  }
  10% {
    fill: #4A9775;
  }
  20% {
    fill: #54AB84;
  }
  30% {
    fill: #6EBD8E;
  }
  40% {
    fill: #8FC78E;
  }
  50% {
    fill: #ABD18F;
  }
  60% {
    fill: #8FC78E;
  }
  70% {
    fill: #6EBD8E;
  }
  80% {
    fill: #54AB84;
  }
  90% {
    fill: #4A9775;
  }
  100% {
    fill: #3F8264;
  }
}
@-webkit-keyframes background-right {
  0% {
    fill: #497DBF;
  }
  10% {
    fill: #4E95D1;
  }
  20% {
    fill: #54ABDC;
  }
  30% {
    fill: #6FBEDC;
  }
  40% {
    fill: #8FC7DC;
  }
  50% {
    fill: #ABD1DC;
  }
  60% {
    fill: #8FC7DC;
  }
  70% {
    fill: #6FBEDC;
  }
  80% {
    fill: #54ABDC;
  }
  90% {
    fill: #4E95D1;
  }
  100% {
    fill: #497DBF;
  }
}
@-moz-keyframes background-right {
  0% {
    fill: #497DBF;
  }
  10% {
    fill: #4E95D1;
  }
  20% {
    fill: #54ABDC;
  }
  30% {
    fill: #6FBEDC;
  }
  40% {
    fill: #8FC7DC;
  }
  50% {
    fill: #ABD1DC;
  }
  60% {
    fill: #8FC7DC;
  }
  70% {
    fill: #6FBEDC;
  }
  80% {
    fill: #54ABDC;
  }
  90% {
    fill: #4E95D1;
  }
  100% {
    fill: #497DBF;
  }
}
@-o-keyframes background-right {
  0% {
    fill: #497DBF;
  }
  10% {
    fill: #4E95D1;
  }
  20% {
    fill: #54ABDC;
  }
  30% {
    fill: #6FBEDC;
  }
  40% {
    fill: #8FC7DC;
  }
  50% {
    fill: #ABD1DC;
  }
  60% {
    fill: #8FC7DC;
  }
  70% {
    fill: #6FBEDC;
  }
  80% {
    fill: #54ABDC;
  }
  90% {
    fill: #4E95D1;
  }
  100% {
    fill: #497DBF;
  }
}
@keyframes background-right {
  0% {
    fill: #497DBF;
  }
  10% {
    fill: #4E95D1;
  }
  20% {
    fill: #54ABDC;
  }
  30% {
    fill: #6FBEDC;
  }
  40% {
    fill: #8FC7DC;
  }
  50% {
    fill: #ABD1DC;
  }
  60% {
    fill: #8FC7DC;
  }
  70% {
    fill: #6FBEDC;
  }
  80% {
    fill: #54ABDC;
  }
  90% {
    fill: #4E95D1;
  }
  100% {
    fill: #497DBF;
  }
}
@-webkit-keyframes background-left {
  0% {
    fill: #DBADAD;
  }
  10% {
    fill: #DB9191;
  }
  20% {
    fill: #DB7076;
  }
  30% {
    fill: #DB5756;
  }
  40% {
    fill: #CE4F4E;
  }
  50% {
    fill: #BD4A4A;
  }
  60% {
    fill: #CE4F4E;
  }
  70% {
    fill: #DB5756;
  }
  80% {
    fill: #DB7076;
  }
  90% {
    fill: #DB9191;
  }
  100% {
    fill: #DBADAD;
  }
}
@-moz-keyframes background-left {
  0% {
    fill: #DBADAD;
  }
  10% {
    fill: #DB9191;
  }
  20% {
    fill: #DB7076;
  }
  30% {
    fill: #DB5756;
  }
  40% {
    fill: #CE4F4E;
  }
  50% {
    fill: #BD4A4A;
  }
  60% {
    fill: #CE4F4E;
  }
  70% {
    fill: #DB5756;
  }
  80% {
    fill: #DB7076;
  }
  90% {
    fill: #DB9191;
  }
  100% {
    fill: #DBADAD;
  }
}
@-o-keyframes background-left {
  0% {
    fill: #DBADAD;
  }
  10% {
    fill: #DB9191;
  }
  20% {
    fill: #DB7076;
  }
  30% {
    fill: #DB5756;
  }
  40% {
    fill: #CE4F4E;
  }
  50% {
    fill: #BD4A4A;
  }
  60% {
    fill: #CE4F4E;
  }
  70% {
    fill: #DB5756;
  }
  80% {
    fill: #DB7076;
  }
  90% {
    fill: #DB9191;
  }
  100% {
    fill: #DBADAD;
  }
}
@keyframes background-left {
  0% {
    fill: #DBADAD;
  }
  10% {
    fill: #DB9191;
  }
  20% {
    fill: #DB7076;
  }
  30% {
    fill: #DB5756;
  }
  40% {
    fill: #CE4F4E;
  }
  50% {
    fill: #BD4A4A;
  }
  60% {
    fill: #CE4F4E;
  }
  70% {
    fill: #DB5756;
  }
  80% {
    fill: #DB7076;
  }
  90% {
    fill: #DB9191;
  }
  100% {
    fill: #DBADAD;
  }
}
@-webkit-keyframes spiral {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
  }
  75% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes spiral {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
  }
  75% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes spiral {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
  }
  75% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes spiral {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
  }
  75% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
html,
body {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  margin: 0;
}

svg {
  width: 100%;
  height: 600px;
  top: -90px;
  bottom: 0;
  margin: auto;
  position: absolute;
}
svg .side-bottom {
  -webkit-animation: background-bottom 6s linear infinite;
  -moz-animation: background-bottom 6s linear infinite;
  animation: background-bottom 6s linear infinite;
}
svg .side-right {
  -webkit-animation: background-right 5s linear infinite;
  -moz-animation: background-right 5s linear infinite;
  animation: background-right 5s linear infinite;
}
svg .side-left {
  -webkit-animation: background-left 5.5s linear infinite;
  -moz-animation: background-left 5.5s linear infinite;
  animation: background-left 5.5s linear infinite;
}

div {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 100%;
  background: black;
  -webkit-animation: spiral 50s linear infinite;
  -moz-animation: spiral 50s linear infinite;
  animation: spiral 50s linear infinite;
  box-shadow: 0 0 0 20px white, 0 0 0 40px black, 0 0 0 60px white, 0 0 0 80px black, 0 0 0 100px white, 0 0 0 120px black, 0 0 0 140px white, 0 0 0 160px black, 0 0 0 180px white, 0 0 0 200px black, 0 0 0 220px white, 0 0 0 240px black, 0 0 0 260px white, 0 0 0 280px black, 0 0 0 300px white, 0 0 0 320px black, 0 0 0 340px white, 0 0 0 360px black, 0 0 0 380px white, 0 0 0 400px black, 0 0 0 420px white, 0 0 0 440px black, 0 0 0 460px white, 0 0 0 480px black, 0 0 0 500px white, 0 0 0 520px black, 0 0 0 540px white, 0 0 0 560px black, 0 0 0 580px white, 0 0 0 600px black, 0 0 0 620px white, 0 0 0 640px black, 0 0 0 660px white, 0 0 0 680px black, 0 0 0 700px white, 0 0 0 720px black, 0 0 0 740px white, 0 0 0 760px black, 0 0 0 780px white, 0 0 0 800px black, 0 0 0 820px white, 0 0 0 840px black, 0 0 0 860px white, 0 0 0 880px black, 0 0 0 900px white, 0 0 0 920px black, 0 0 0 940px white, 0 0 0 960px black, 0 0 0 980px white, 0 0 0 1000px black, 0 0 0 1020px white, 0 0 0 1040px black, 0 0 0 1060px white, 0 0 0 1080px black, 0 0 0 1000px white, 0 0 0 1020px black, 0 0 0 1040px white, 0 0 0 1060px black, 0 0 0 1080px white;
}

HTML

Recommendation

Join Effecthub.com