CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
html,
body {
height: 100%;
}
body {
background: #fffff4;
overflow: hidden;
}
.hoja {
color: #dcdce2;
position: absolute;
top: 45%;
left: 50%;
margin-left: -140px;
margin-top: -140px;
width: 280px;
height: 280px;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 35px;
line-height: 280px;
-webkit-font-smoothing: antialiased;
}
.hoja:after,
.hoja:before {
content: "";
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: center center;
}
.hoja:after {
box-shadow: inset 0 17.5px 0 rgba(250, 250, 0, 0.6), inset 17.5px 0 0 rgba(250, 200, 0, 0.6), inset 0 -17.5px 0 rgba(250, 150, 0, 0.6), inset -17.5px 0 0 rgba(250, 100, 0, 0.6);
animation: rotar 2s linear infinite;
}
.hoja:before {
box-shadow: inset 0 17.5px 0 rgba(0, 250, 250, 0.6), inset 17.5px 0 0 rgba(0, 200, 200, 0.6), inset 0 -17.5px 0 rgba(0, 150, 200, 0.6), inset -17.5px 0 0 rgba(0, 200, 250, 0.6);
animation: rotarIz 2s linear infinite;
}
@keyframes rotar {
0% {
transform: rotatez(0deg) scalex(1) scaley(1);
}
50% {
transform: rotatez(180deg) scalex(0.82) scaley(0.95);
}
100% {
transform: rotatez(360deg) scalex(1) scaley(1);
}
}
@keyframes rotarIz {
0% {
transform: rotatez(0deg) scalex(1) scaley(1);
}
50% {
transform: rotatez(-180deg) scalex(0.95) scaley(0.85);
}
100% {
transform: rotatez(-360deg) scalex(1) scaley(1);
}
}
