Pod tajemniczą nazwą kryje się zaskakująco ciekawy efekt animacji. Po umieszczeniu kursowa na barwnym kole, "kalejdoskop" płynnie otwiera się ukazując tekst ukryty pod warstwami kolorów.
Źródło:
http://cssdeck.com/labs/ae6iuedj
HTML
<![CDATA[<!--
autor: Marco Barría
https://twitter.com/marco_bf
-->
<div class="diafragma">
<div class="text">
CSS3</div>
<div class="hoja">
</div>
<div class="hoja giro">
</div>
</div>
]]>
CSS
<![CDATA[@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
// VAR
@D:280px; // size control
@R:(@D/2);
@B:(@R/10);
// opacity
@O: 1;
html,
body{
height:100%;
}
body{
background:rgb(250,250,200);
}
.diafragma{
background:rgb(255,255,255);
border-radius:100%;
border:2px solid rgb(250,250,200);
box-shadow: 0 0 @B 2px rgb(250,250,150);
cursor:pointer;
position:absolute;
top:50%; left:50%;
margin-left:-@R;
margin-top:-@R;
width:@D;
height:@D;
overflow:hidden;
}
.diafragma:hover > .hoja{
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);
}
.hoja{
border-radius:100%;
box-shadow: inset 0 @R 0 rgba(200, 200, 0, @O/2),
inset @R 0 0 rgba(150, 150, 0, @O/2),
inset 0 -@R 0 rgba(200, 100, 0, @O/2),
inset -@R 0 0 rgba(250, 250, 0, @O/2);
position:absolute;
width:100%;
height:100%;
transition:box-shadow 1s;
}
.giro{
transform:rotateZ(45deg);
}
.text{
color:rgb(200,200,200);
position:absolute;
text-align:center;
font-family: 'Open Sans', sans-serif;
font-size:@R/3;
line-height:@D;
width:100%;
-webkit-font-smoothing: antialiased;
}
]]>
0 komentarze:
Prześlij komentarz