Efectos especiales utilizando CSS y alguna fantasía

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.

Esto se hace usando sombra de texto y animación aplicada a él.

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

Esto se hace usando sombra de texto y animación aplicada a él.

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;
}
Posted in Miscellaneous.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.