CSS es increíble, te permite hacer muchas cosas sin necesidad de javascript, lo uso para mantener la capacidad de respuesta de un sitio web, por ejemplo… Pero, también me gusta añadir efectos de lujo, pura decoración.
Veamos algunos ejemplos…
Ejemplos CSS animado
Por sólo uso CSS, ver qué se puede hacer…
Rebote, o efecto de salto utilizando animación y texto-sombra.
Cada línea de la animación que aparece abajo representa un 'marco' de la animación, que va de 0 a 100%, y en realidad representan el porcentaje del tiempo total de animación (que se encuentra en el css del elemento a animar)
@keyframes despedida {}
0% {texto sombra: 0px 0px 1px rgba (0, 0, 0, 0,88);}
20% {texto sombra: 5px 5px 5px rgba (0, 0, 0, 0,88);}
40% {texto sombra: 7px 7px 7px rgba (0, 0, 0, 0,88);}
50% {texto sombra: 8px 8px 8px rgba (0, 0, 0, 0,88);}
70% {texto sombra: 7px 7px 7px 4px rgba (0, 0, 0, 0,88);}
90% {texto sombra: 5px 5px 5px rgba (0, 0, 0, 0,88);}
100% {texto sombra: 0px 0px 1px rgba (0, 0, 0, 0,88);}
}
Y este es el CSS que se aplica al elemento que desea "rebote" o animar.
{.bouncer}
nombre de la animación: rebote;
Animación-Duración: 2s;
número de iteraciones de animación: infinito;
}
Efecto de subrayado de suspender
Cada línea de la animación que aparece abajo representa un 'marco' de la animación, que va de 0 a 100%, y en realidad representan el porcentaje del tiempo total de animación (que se encuentra en el css del elemento a animar)
artículo Li.Menu una: después de {}
contenido: "";
posición: absoluto;
ancho: 120%;
altura: 2px;
parte inferior: 24px;
izquierda: -10%;
fondo: #e7308c;
transformar: scalex(0);
transición:.2s;
}
artículo Li.Menu un: hover: después de {}
contenido: "";
posición: absoluto;
ancho: 120%;
altura: 2px;
parte inferior: 24px;
izquierda: -10%;
fondo: #e7308c;
transformar: scalex(1);
transición:.2s;
}