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.
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
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;
}