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 1s 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!