EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

body { overflow-x:hidden; background:#E19A26; }
span {
  position:relative;
  width:100%; height: 0;
  padding-bottom: 100%;
  display:block;
}
div { position:absolute; top:50%; left:50%; -webkit-animation: top 1s linear infinite; }
div:before, div:after {
  content:'';
  width:100%; height:100%;
  position:absolute;
  background:#C51C2F;
}
div:before { /* Middle of layer */ background:#F0D770; -webkit-animation:middle 1s linear infinite; }
div:after { /* Top of layer */ -webkit-transform:rotate(30deg); }
div:nth-of-type(4):after { -webkit-animation: keepStill 1s linear infinite; }

div:nth-of-type(4) { /* Topmost level */ width:30%; height:30%; margin-top:-15%; margin-left:-15%; }
div:nth-of-type(3) { width:50%; height:50%; margin-top:-25%; margin-left:-25%; }
div:nth-of-type(2) { width:70%; height:70%; margin-top:-35%; margin-left:-35%; }
div:nth-of-type(1) { width:100%; height:100%; margin-top:-50%; margin-left:-50%; }

/* Animations */
@-webkit-keyframes top { 0% { -webkit-transform:rotate(60deg); } 100% { -webkit-transform:rotate(150deg); } }
@-webkit-keyframes middle { 0% { -webkit-transform:rotate( -30deg); } 100% { -webkit-transform:rotate(-210deg); } }
@-webkit-keyframes keepStill { 0% { -webkit-transform:rotate(30deg); } 100% { -webkit-transform:rotate(-60deg); } }
@keyframes top { 0% { transform:rotate(60deg); } 100% { transform:rotate(150deg); } }
@keyframes middle { 0% { transform:rotate( -30deg); } 100% { transform:rotate(-210deg); } }
@keyframes keepStill { 0% { transform:rotate(30deg); } 100% { transform:rotate(-60deg); } }

/* Coloring */
div:nth-of-type(4), div:nth-of-type(3):before, div:nth-of-type(2), div:nth-of-type(1):before { background:#E8DDB0; }
div:nth-of-type(4):after, div:nth-of-type(1), div:nth-of-type(3) { background:#C51C2F; }
div:nth-of-type(2):after { background:#E19A26; }
div:nth-of-type(3):after, div:nth-of-type(1):after { background:#262B30; }

HTML

Recommendation

Join Effecthub.com