<style type="text/css"> #menucircle { margin-left:50px; } a.menucircle { background-image: -moz-linear-gradient(100% 100% 90deg, #ABC, #456); background-image: -webkit-gradient(linear, left bottom, left top, from(#ABC), to(#456)); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF445566', EndColorStr='#FFAABBCC'); background-color: #000; -moz-transition-duration: 3s; -webkit-transition-duration: 3s; -o-transition-duration: 3s; transition-duration: 3s; border-radius: 10px; color: #FFF !important; display: block; float:left; font-family: Helvetica; font-size:30px; height: 100px; line-height: 100px; text-align: center; text-decoration: none; margin: 0 10px; width: 150px; } a.menucircle:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transition-duration: .4s; -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; background-image: -moz-linear-gradient(100% 100% 90deg, #DEF, #567); background-image: -webkit-gradient(linear, left bottom, left top, from(#DEF), to(#567)); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF556677', EndColorStr='#FFDDEEFF'); color: #FF0; } </style> <div id="menucircle"> <a class="menucircle" href="#">ejemplo</a> <!-- otros enlaces --> </div>
Sólo un ejemplo más de las posibilidades que brinda el CSS3 y las transiciones para crear menús animados:
REFERENCIAS:css.devillasbuenas.es

margin y padding: Parecen lo mismo pero no lo son
¿Acaso estos dos textos son iguales? Uno está a la derecha, otro a …

El problema de los menús que no se despliegan
Toda etiqueta es un rectángulo, si tiene un borde o un color de …

Tooltips con CSS: Más simple, imposible
Hay muchas formas de crear tooltips con CSS; probablemente, esta, …

Float: Lo principal y lo secundario
Cuando a un elemento le agregamos la propiedad float, lo convertimos …
9 comentarios:
Es un placer pasearme por tu sitio.
Saludos.
jajaja genial!
Pues parece que el efecto no funciona con Firefox 3.6.17 corriendo en Kubuntu porque al clickar en cualquier elemento únicamente el cursor vuelve al inicio de la página....
Saludos.
nice effect hover master
Josep: Los efectos de transición funcionan en Firefox versión 4 o superior así que, sólo es cosa de actualizarlo.
Jajajaja... ¡touché, JMiur!

Ya me hacía el remolón para actualizarme, pero ha valido la pena por ver esos giraldinos menús...
Saludos.
No se arrepentirá, Josep. Es buena actualización y mejora mucho la performance del navegador aparte de dejarnos jugar un poco con estas cosas que se mueven
donde se pone ese codigo?? dentro de plantilla?? o se agrega ub gadget?
Donde quieras usarlo, es indistinto.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...