Starbursts: Insignias animadas con CSS3

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íq ue habra que seguir esperando que las nuevas versiones de los navegadores nos permitan jugar con las animaciones ... falta poco, paciencia.

NEW
CSS3
Starbursts!
NEW
CSS3
Starbursts!
NEW
CSS3
Starbursts!

NEW
CSS3
Starbursts!
NEW
CSS3
Starbursts!NEW CSS3
Starbursts!

NEW CSS3
Starbursts!

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:

.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.