Effetti speciali usando CSS e qualche fantasia

CSS è incredibile, ti permette di fare molto senza la necessità di javascript, io lo uso per mantenere la velocità di risposta di un sito Web, per esempio… Ma, mi piace anche di aggiungere effetti di decorazione fantasia, puro.

Vediamo alcuni esempi…

Esempi di CSS animati

Da solo usng CSS, vedere cosa si può fare…

Rimbalzare, o salto effetto utilizzando le animazioni e testo-ombra.

Questa operazione viene eseguita utilizzando testo-ombra e animazione applicata ad esso.

Ogni riga dell'animazione qui sotto rappresenta una 'cornice' dell'animazione, che va da 0 a 100%, e in realtà rappresenta la percentuale del tempo totale di animazione (che è impostato all'interno del css dell'elemento per animare)

@keyframes rimbalzo {
 0% {text-shadow: 0px 0px 1px rgba (0, 0, 0, 0.88);}
 20% {text-shadow: 5px 5px 5px rgba (0, 0, 0, 0.88);}
 40% {text-shadow: 7px 7px 7px rgba (0, 0, 0, 0.88);}
 50% {text-shadow: 8px 8px 8px rgba (0, 0, 0, 0.88);}
 70% {text-shadow: 7px 7px 7px 4px rgba (0, 0, 0, 0.88);}
 90% {text-shadow: 5px 5px 5px rgba (0, 0, 0, 0.88);}
 100% {text-shadow: 0px 0px 1px rgba (0, 0, 0, 0.88);}
}

E questo è il CSS applicato all'elemento che si desidera "rimbalzo", o aggiungere un'animazione.

.bouncer () {
 animazione-nome: rimbalzo;
 Animazione-Durata: 2s;
 animation-iteration-count: infinito;
}

Effetto di sottolineatura hover

Questa operazione viene eseguita utilizzando testo-ombra e animazione applicata ad esso.

Ogni riga dell'animazione qui sotto rappresenta una 'cornice' dell'animazione, che va da 0 a 100%, e in realtà rappresenta la percentuale del tempo totale di animazione (che è impostato all'interno del css dell'elemento per animare)

li.menu-elemento un: dopo {
    contenuto: "";
    Posizione: assoluta;
    Larghezza: 120%;
    Altezza: 2px;
    fondo: 24px;
    sinistra: -10%;
    Priorità bassa: #e7308c;
    trasformare: scalex(0);
    transizione:.2s;
}

li.menu-elemento un: al passaggio del mouse: dopo {
    contenuto: "";
    Posizione: assoluta;
    Larghezza: 120%;
    Altezza: 2px;
    fondo: 24px;
    sinistra: -10%;
    Priorità bassa: #e7308c;
    trasformare: scalex(1);
    transizione:.2s;
}
Posted in Miscellaneous.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.