<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
9 comentarios:
:) Muy divertido, precisamente hace unas semanas publiqué unas parecidas, pero claro, no tan vistosas, utilizando claro, tu misma referencia.
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 :D
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 ...