Starbursts: Insignias animadas con CSS3
JMiur
CSS3 Starbursts es un experimento que no funcionará en Internet Explorer, que en Firefox 3 se mostrará parcialmente y que en Chrome y Safari se ve espectacular así que habra que seguir esperando que las nuevas versiones de los navegadores nos permitan jugar con las animaciones ... falta poco, paciencia.
Las reglas de estilo son complejas para estar escribiendo acá pero, todas ellas se encuentran en el demo que puede descargarse desde la página del autor.
Un simple ejemplo del último de ellos; el CSS dice esto:
Un simple ejemplo del último de ellos; el CSS dice esto:
.starburst7 {
color: #FFF;
display: block;
font-family: Arial, sans-serif;
font-weight: bold;
height: 3em;
text-align: center;
text-decoration: none;
width: 8em;
}
.starburst7 span {
background:#00CD00;
display: block;
height: 2.5em;
width: 8em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
rotation: -45deg;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
text-shadow: 1px 1px 1px #000;
}
.starburst7:hover {
background: transparent;
}
.starburst7:hover span {
-webkit-transform: rotate(52.5deg);
-moz-transform: rotate(52.5deg);
rotation: 52.5deg;
-webkit-transform: translate(1em, 0);
-moz-transform: translate(1em, 0);
translate(1em, 0);
}
Y el HTML esto otro:
<a href="#" class="starburst7"> <span><span><span><span><span> <span><span><span><span><span> <span> <span><span><span><span> <span>NEW CSS3<br />Starbursts!</span> </span></span></span></span></span> </span></span></span></span></span> </span></span></span></span></span> </a>
¿Loco? Muchísimo 
CSS Starbursts with CSS3 transforms and transitions
« Back to the article CSS3 Starbursts by Matthew James Taylor
No hay comentarios:
Publicar un comentario