EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

/* grid and site dimensions */
/* media query dimensions */
/* obviously the default view doesn't require a media query */
.box.circle-1 {
  width: 60px;
  height: 60px;
}
.box.circle-1 .inner-circle {
  -webkit-animation-delay: -2600ms;
          animation-delay: -2600ms;
}
.box.circle-2 {
  width: 140px;
  height: 140px;
}
.box.circle-2 .inner-circle {
  -webkit-animation-delay: -18600ms;
          animation-delay: -18600ms;
}
.box.circle-3 {
  width: 220px;
  height: 220px;
}
.box.circle-3 .inner-circle {
  -webkit-animation-delay: -47400ms;
          animation-delay: -47400ms;
}
.box.circle-4 {
  width: 300px;
  height: 300px;
}
.box.circle-4 .inner-circle {
  -webkit-animation-delay: -89000ms;
          animation-delay: -89000ms;
}
.box.circle-5 {
  width: 380px;
  height: 380px;
}
.box.circle-5 .inner-circle {
  -webkit-animation-delay: -143400ms;
          animation-delay: -143400ms;
}
.box.circle-6 {
  width: 460px;
  height: 460px;
}
.box.circle-6 .inner-circle {
  -webkit-animation-delay: -210600ms;
          animation-delay: -210600ms;
}
.box.circle-7 {
  width: 540px;
  height: 540px;
}
.box.circle-7 .inner-circle {
  -webkit-animation-delay: -290600ms;
          animation-delay: -290600ms;
}
.box.circle-8 {
  width: 620px;
  height: 620px;
}
.box.circle-8 .inner-circle {
  -webkit-animation-delay: -383400ms;
          animation-delay: -383400ms;
}
.box.circle-9 {
  width: 700px;
  height: 700px;
}
.box.circle-9 .inner-circle {
  -webkit-animation-delay: -489000ms;
          animation-delay: -489000ms;
}
.box.circle-10 {
  width: 780px;
  height: 780px;
}
.box.circle-10 .inner-circle {
  -webkit-animation-delay: -607400ms;
          animation-delay: -607400ms;
}
.box.circle-11 {
  width: 860px;
  height: 860px;
}
.box.circle-11 .inner-circle {
  -webkit-animation-delay: -738600ms;
          animation-delay: -738600ms;
}
.box.circle-12 {
  width: 940px;
  height: 940px;
}
.box.circle-12 .inner-circle {
  -webkit-animation-delay: -882600ms;
          animation-delay: -882600ms;
}
@media only screen and (min-width: 760px) and (max-width: 1000px) {
  .box.circle-1 {
    width: 40px;
    height: 40px;
  }
  .box.circle-1 .inner-circle {
    -webkit-animation-delay: -600ms;
            animation-delay: -600ms;
  }
  .box.circle-2 {
    width: 100px;
    height: 100px;
  }
  .box.circle-2 .inner-circle {
    -webkit-animation-delay: -9000ms;
            animation-delay: -9000ms;
  }
  .box.circle-3 {
    width: 160px;
    height: 160px;
  }
  .box.circle-3 .inner-circle {
    -webkit-animation-delay: -24600ms;
            animation-delay: -24600ms;
  }
  .box.circle-4 {
    width: 220px;
    height: 220px;
  }
  .box.circle-4 .inner-circle {
    -webkit-animation-delay: -47400ms;
            animation-delay: -47400ms;
  }
  .box.circle-5 {
    width: 280px;
    height: 280px;
  }
  .box.circle-5 .inner-circle {
    -webkit-animation-delay: -77400ms;
            animation-delay: -77400ms;
  }
  .box.circle-6 {
    width: 340px;
    height: 340px;
  }
  .box.circle-6 .inner-circle {
    -webkit-animation-delay: -114600ms;
            animation-delay: -114600ms;
  }
  .box.circle-7 {
    width: 400px;
    height: 400px;
  }
  .box.circle-7 .inner-circle {
    -webkit-animation-delay: -159000ms;
            animation-delay: -159000ms;
  }
  .box.circle-8 {
    width: 460px;
    height: 460px;
  }
  .box.circle-8 .inner-circle {
    -webkit-animation-delay: -210600ms;
            animation-delay: -210600ms;
  }
  .box.circle-9 {
    width: 520px;
    height: 520px;
  }
  .box.circle-9 .inner-circle {
    -webkit-animation-delay: -269400ms;
            animation-delay: -269400ms;
  }
  .box.circle-10 {
    width: 580px;
    height: 580px;
  }
  .box.circle-10 .inner-circle {
    -webkit-animation-delay: -335400ms;
            animation-delay: -335400ms;
  }
  .box.circle-11 {
    width: 640px;
    height: 640px;
  }
  .box.circle-11 .inner-circle {
    -webkit-animation-delay: -408600ms;
            animation-delay: -408600ms;
  }
  .box.circle-12 {
    width: 700px;
    height: 700px;
  }
  .box.circle-12 .inner-circle {
    -webkit-animation-delay: -489000ms;
            animation-delay: -489000ms;
  }
}
@media only screen and (max-width: 760px) {
  .box.circle-1 {
    width: 40px;
    height: 40px;
  }
  .box.circle-1 .inner-circle {
    -webkit-animation-delay: -600ms;
            animation-delay: -600ms;
  }
  .box.circle-2 {
    width: 100px;
    height: 100px;
  }
  .box.circle-2 .inner-circle {
    -webkit-animation-delay: -9000ms;
            animation-delay: -9000ms;
  }
  .box.circle-3 {
    width: 160px;
    height: 160px;
  }
  .box.circle-3 .inner-circle {
    -webkit-animation-delay: -24600ms;
            animation-delay: -24600ms;
  }
  .box.circle-4 {
    width: 220px;
    height: 220px;
  }
  .box.circle-4 .inner-circle {
    -webkit-animation-delay: -47400ms;
            animation-delay: -47400ms;
  }
  .box.circle-5 {
    width: 280px;
    height: 280px;
  }
  .box.circle-5 .inner-circle {
    -webkit-animation-delay: -77400ms;
            animation-delay: -77400ms;
  }
}
@media only screen and (min-width: 480px) and (max-width: 760px) {
  .box.circle-1 {
    width: 40px;
    height: 40px;
  }
  .box.circle-1 .inner-circle {
    -webkit-animation-delay: -600ms;
            animation-delay: -600ms;
  }
  .box.circle-2 {
    width: 100px;
    height: 100px;
  }
  .box.circle-2 .inner-circle {
    -webkit-animation-delay: -9000ms;
            animation-delay: -9000ms;
  }
  .box.circle-3 {
    width: 160px;
    height: 160px;
  }
  .box.circle-3 .inner-circle {
    -webkit-animation-delay: -24600ms;
            animation-delay: -24600ms;
  }
  .box.circle-4 {
    width: 220px;
    height: 220px;
  }
  .box.circle-4 .inner-circle {
    -webkit-animation-delay: -47400ms;
            animation-delay: -47400ms;
  }
  .box.circle-5 {
    width: 280px;
    height: 280px;
  }
  .box.circle-5 .inner-circle {
    -webkit-animation-delay: -77400ms;
            animation-delay: -77400ms;
  }
  .box.circle-6 {
    width: 340px;
    height: 340px;
  }
  .box.circle-6 .inner-circle {
    -webkit-animation-delay: -114600ms;
            animation-delay: -114600ms;
  }
  .box.circle-7 {
    width: 400px;
    height: 400px;
  }
  .box.circle-7 .inner-circle {
    -webkit-animation-delay: -159000ms;
            animation-delay: -159000ms;
  }
}
* {
  box-sizing: border-box;
}
html {
  background-color: #40e0d0;
  background-color: #060606;
}
.box {
  background: transparent;
  border-radius: 50%;
  poistion: relative;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.inner-circle {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 10px solid #fff;
  -webkit-clip-path: inset(50% 0px 0px 0px);
          clip-path: inset(50% 0px 0px 0px);
  -webkit-transition: all 1s ease-out;
          transition: all 1s ease-out;
  opacity: 0;
}
.animate .inner-circle {
  -webkit-animation-delay: inherit;
          animation-delay: inherit;
  -webkit-animation: spin 4.9s infinite linear;
          animation: spin 4.9s infinite linear;
  opacity: 0.6;
}
-webkit-filter url("#blur") {
  -webkit-filter: url("#blur");
          filter: url("#blur");
}
svg:not(:root) {
  overflow: hidden;
}
.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}
.absolute {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
html {
  height: 100%;
  background: -webkit-radial-gradient(bottom, ellipse, #1b2735 0%, #090a0f 100%);
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}
#space,
.stars {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.stars {
  background-image: -webkit-radial-gradient(20px 30px, 2px 2px, #eee, rgba(0,0,0,0)), -webkit-radial-gradient(40px 70px, 2px 2px, #fff, rgba(0,0,0,0)), -webkit-radial-gradient(50px 160px, 2px 2px, #ddd, rgba(0,0,0,0)), -webkit-radial-gradient(90px 40px, 2px 2px, #fff, rgba(0,0,0,0)), -webkit-radial-gradient(130px 80px, 2px 2px, #fff, rgba(0,0,0,0)), -webkit-radial-gradient(160px 120px, 2px 2px, #ddd, rgba(0,0,0,0));
  background-image: radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)), radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)), radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  -webkit-animation: zoom 5s infinite;
          animation: zoom 5s infinite;
  opacity: 0;
}
.stars:nth-child(1) {
  background-position: 50% 50%;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.stars:nth-child(2) {
  background-position: 20% 60%;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.stars:nth-child(3) {
  background-position: -20% -30%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.stars:nth-child(4) {
  background-position: 40% -80%;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.stars:nth-child(5) {
  background-position: -20% 30%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.op {
  opacity: 0.2;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(-360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes zoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  85% {
    opacity: 1;
    -webkit-transform: scale(2.8);
            transform: scale(2.8);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
  }
}
@keyframes zoom {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  85% {
    opacity: 1;
    -webkit-transform: scale(2.8);
            transform: scale(2.8);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
  }
}

HTML

Recommendation

Join Effecthub.com