Animacja stworzona za pomocą CSS'a - niesamowity efekt!
HTML
<![CDATA[<!-- autor: Marco Barría -->
<div class="hoja">efcia</div>
]]>
CSS
<![CDATA[@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
// ============================================ VAR
@D:280px; // size control // diametro
@R:(@D/2); // radio
@B:(@R/8);
@O: 0.5; // opacity
@A: 2s; // accelerate
html,
body{
height:100%;
}
body{
background:rgb(255,255,244);
}
.hoja{
color:rgb(220,220,226);
position:absolute;
top:50%; left:50%;
margin-left:-@R;
margin-top:-@R;
width:@D;
height:@D;
text-align:center;
font-family: 'Open Sans', sans-serif;
font-size:@R/4;
line-height:@D;
-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;
transform:rotateZ(0deg) scaleX(1) scaleY(1);
}
.hoja:after{
box-shadow: inset 0 @B 0 rgba(250, 250, 0, @O),
inset @B 0 0 rgba(250, 200, 0, @O),
inset 0 -@B 0 rgba(250, 150, 0, @O),
inset -@B 0 0 rgba(250, 100, 0, @O);
animation:rotar @A linear infinite;
}
.hoja:before{
box-shadow: inset 0 @B 0 rgba(0, 250, 250, @O),
inset @B 0 0 rgba(0, 200, 200, @O),
inset 0 -@B 0 rgba(0, 150, 200, @O),
inset -@B 0 0 rgba(0, 200, 250, @O);
animation:rotarIz @A 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);
}
}
]]>
Źródło:
http://cssdeck.com/labs/double-ring
0 komentarze:
Prześlij komentarz