EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body {
  background: black url("http://fay.io/e/vosBF/stars.jpg") repeat;
}

.rotate-c {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 500px;
  height: 500px;
  margin: auto;
  border-radius: 999px;
  background-color: #eee;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  animation: spin-bob 2.5s linear infinite;
  box-shadow: 0 0 100px 0 rgba(255, 255, 255, 0.4);
}

.rotate-o {
  position: absolute;
  top: 125px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 1em;
  background-color: #eee;
  margin-left: -5px;
  box-shadow: 0 4px 0 4px #eee , 0 8px 0 16px #eee , 0 12px 0 24px #292929 , 0 16px 0 32px #eee , 0 20px 0 40px #292929 , 0 24px 0 48px #eee , 0 28px 0 56px #292929 , 0 32px 0 64px #eee , 0 36px 0 72px #292929 , 0 40px 0 80px #eee , 0 44px 0 88px #292929 , 0 48px 0 96px #eee , 0 52px 0 104px #292929 , 0 56px 0 112px #eee , 0 60px 0 120px #292929 , 0 64px 0 128px #eee , 0 68px 0 136px #292929 , 0 72px 0 144px #eee , 0 76px 0 152px #292929 , 0 80px 0 160px #eee , 0 84px 0 168px #292929 , 0 88px 0 176px #eee , 0 92px 0 184px #292929 , 0 96px 0 192px #eee , 0 100px 0 200px #292929 , 0 104px 0 208px #eee , 0 108px 0 216px #292929 , 0 112px 0 224px #eee , 0 116px 0 232px #292929 , 0 120px 0 240px #eee;
}

@keyframes spin-bob {
  0% {
    transform: rotate(0deg) scale(0.95) translate3d(0, 10px, 0);
  }
  50% {
    transform: rotate(180deg) scale(1.05) translate3d(0, -10px, 0);
  }
  100% {
    transform: rotate(360deg) scale(0.95) translate3d(0, 10px, 0);
  }
}

HTML

Recommendation

Join Effecthub.com