Visita nuestros cursos en KODOTI. Click para unirte
Estudia con KODOTI. Únete

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
5,154 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para darle una pronta solución.

¿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.

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