Con la propiedad de transición del webkit de CSS3 y las propiedades de opacidad, es fácil duplicar los efectos de JavaScript y jQuery con CSS.
Inserte este código en el cuerpo de su html:
1
| < div id = "fade" >Hover over this text to see it fade away</ div > |
Este código CSS hará que todo el div #fade se desvanezca a nada cuando se cierne sobre:
1
2
3
4 4
5 5
6 6
7 7
| #fade { opacity: 1 ; -webkit-transition: opacity 1 s linear; } #fade :hover{ opacity: 0 ; } |
Al definir los parámetros de la propiedad -webkit-transition a opacidad 1s lineal , estamos definiendo qué propiedad va a hacer la transición (opacidad), durante cuánto tiempo (1s) y si la transición cambiará o no la velocidad a lo largo de la duración (lineal ) La simplicidad de este código hace que CSS3 sea un verdadero rival para jQuery en términos de crear este tipo de efecto de desvanecimiento.
No hay comentarios.:
Publicar un comentario
Dejanos tu comentario para seguir mejorando!