Aprende más, haciendo pequeños proyectos Ir a KODOTI
Capacítate con nosotros KODOTI

Efectos css para nuestros proyectos web

Hover.css es una hoja de estilo que implementa una gran variedad de animaciones para usar en nuestras webs.

Rodríguez Patiño, Eduardo
Publicado:
5,414 lecturas
Rodríguez Patiño, Eduardo

¿Que es hover.css?, es una hoja de estilo donde se han creado un conjunto de animaciones para poder usarlo en nuestros proyectos web.

¿Donde lo descargo?, lo que tenemos que hacer es entrar http://ianlunn.github.io/Hover/ y descargar la hoja de estilo, luego la agregamos a nuestro proyecto.

¿Como la usamos?, pues con las propiedades que aporta CSS3 debemos aplicar una regla de estilo a la etiqueta html que queramos dar el efecto.

Por ejemplo, en mi web le he dado el efecto de temblor "buzz-out", entonces lo que hago es buscar la animación que me interesa y la agrego de la siguiente manera

.posts a:hover {
    -webkit-animation-name: buzz-out;
    animation-name: buzz-out;
    /* Nombre de la animación a usar */
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    /* Tiempo en segundos a durar*/
    -webkit-animation-timing-function: linear;
    /* Que se vea igual desde el comienzo hasta el final */
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    /* Número de vueltas a dar */
    animation-iteration-count: 1;

}

El prefijo -webkit- es para que funcione en Google Chrome, ya que este no lo esta implementando de manera nativa.

Si conocemos de CSS,  podemos resumir esto y dejarlo asì.

.posts a:hover {
    animation: buzz-out 0.75s 1;
    -webkit-animation: buzz-out 0.75s 1;
}

¿Donde estan los nombres de los efectos?,  cuando habras el hover.css, prefiona CTRL + F y busca @keyframes, todo lo qu venga despues de keyframes es el nombre del efecto.


Estudia con nosotros

🚀 Mejora tus oportunidades laborales


¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín