Share
I nostri browser mobili continuano a diventare più potenti e migliori nel mostrarci animazioni fantastiche e meravigliose. Se combinato con il potere di layout del CSS, è possibile creare un lavoro stupendo senza utilizzare alcuna immagine. Il risultato è scalabile, a caricamento rapido e ben, impressionante da vedere.
Diamo un'occhiata a quali cose incredibili le persone stanno facendo e animando solo con HTML e CSS.
C'è così tanto da fare qui che è difficile credere che sia semplicemente HTML e CSS! Animazioni rotanti e movimenti multipli e stratificati si combinano per far sembrare questo ciclista e la sua bicicletta sono fatti di gelatina. Bel uso del BEM anche nella denominazione della classe!
La combinazione di molte parti mobili può rendere un semplice insieme di elementi HTML come un'animazione più complessa, ed è qualcosa che questa demo fa bene. Guarda come i due pianeti interagiscono, mentre le "particelle" circolanti sono solo sparse abbastanza da sembrare casuali.
I semplici strati colorati potrebbero non sembrare molto, ma quando si muovono possono trasmettere un sacco di carattere. In questo esempio, una serie di tag di paragrafo HTML semitrasparenti è animata e l'animazione impilata risultante è ipnotica.
Non abbiamo sempre bisogno di JPG o PNG per creare immagini bellissime, e questo è un altro esempio. Un contenitore div e altri quattro sono tutto ciò che serve per realizzare questa deliziosa immagine del caricatore a tema gelato. Il codice risultante è molto più piccolo di una GIF animata.
Quando si combina l'uso artistico di elementi HTML con alcune animazioni a caratteri, questo è il risultato. Un'animazione incredibilmente liscia ma piena di divertimento. Un grande rispetto per Julia Muzafarova per quello che deve essere stato un lavoro incredibilmente laborioso per costruire tutti quei set di keyframe. Più di pochi caffè anche!
Riunendo un sacco di semplici elementi HTML con una serie di sottili e divertenti animazioni, questo gatto assonnato ha un sacco di carattere. Questo esempio utilizza Sass e le variabili per controllare l'animazione. Prova a cambiarne qualcuno per vedere cosa succede!
È possibile ottenere animazioni fluide quando si utilizzano HTML e CSS, soprattutto quando seguiamo alcuni principi di base. Questa animazione mantiene il numero di elementi al minimo e un grande uso di trasformazioni.
Le animazioni veloci possono aggiungere molto carattere quando sono combinate. In questa demo, guarda come bolle e schizzi sono coreografati insieme per creare un'animazione carina con una spugna felice, il tutto senza alcuna immagine.
Una serie di animazioni di fotogrammi chiave può raccontare una storia o aiutare le persone a capire cosa stanno guardando. Qui vediamo aprire una busta e ricevere una lettera.
Un po 'di movimento sottile può creare grandi sensazioni di intensità! Questo caricatore ha un'auto che sembra accelerare, tutti creati con pochi elementi e animazioni CSS. Senza immagini questo si carica velocemente.
Grazie come sempre a CodePen e alle menti creative dietro a questi demo; ci hanno sicuramente fornito un sacco di ispirazione in questi esempi di animazione. Dai un'occhiata ai seguenti post per saperne di più sugli stessi, e per imparare come creare le tue animazioni CSS!
Accentsconagua