Share
Browserele noastre mobile continuă să devină mai puternice și mai bune pentru a ne arăta minunate animații frumoase. Atunci când este combinată cu puterea layout-ului CSS, este posibil să creați niște lucruri minunate fără a utiliza deloc imagini. Rezultatul este scalabil, încărcare rapidă și bine, impresionant de văzut.
Să aruncăm o privire la lucrurile uimitoare pe care oamenii le fac și le animă numai cu HTML și CSS.
Există atât de multe lucruri care se întâmplă aici, este greu de crezut că este vorba doar de HTML și CSS! Animațiile în rotație și mișcările multiple, stratificate se combină pentru a face să pară că acest ciclist și bicicleta lui sunt făcute din gelatină. Folosiți cu ușurință și BEM în denumirea clasei!
Combinând o mulțime de piese în mișcare poate face ca un simplu set de elemente HTML să pară o animație mai complexă, și asta e bine acest demo. Vedeți cum interacționează cele două planete, în timp ce "particulele" care sunt în mișcare sunt suficient de împrăștiate încât să pară aleatorii.
Straturile simple colorate s-ar putea să nu pară prea mult, dar când se mișcă, pot transmite o mulțime de caractere. În acest exemplu, un set de etichete paragraf HTML semi-transparente sunt animate, iar animația stivă rezultată este hipnotică.
Nu avem întotdeauna nevoie de JPG sau PNG-uri pentru a face imagini frumoase, și acesta este un alt exemplu. Un container div și patru altele este tot ce este necesar pentru a face această imagine delicioasă îngrijorătoare înghețată cu tema încărcătorului. Codul rezultat este mult mai mic decât un GIF animat.
Când combinați utilizarea artistică a elementelor HTML cu animație completă de caractere, acesta este rezultatul. O animație uimitor de netedă, dar plină de distracție. Un respect masiv față de Julia Muzafarova pentru ceea ce trebuie să fi fost o lucrare incredibil de fidela construind toate acele seturi de cadre cheie. Mai mult de câteva cafele!
Reunind o mulțime de elemente HTML simple cu o grămadă de animații subtile și distractive, această pisică somnoroasă are o mulțime de caracter. Acest exemplu folosește Sass și variabile pentru a controla animația. Încercați să schimbați unele pentru a vedea ce se întâmplă!
Obiectivele animațiilor pot fi obținute atunci când se utilizează HTML și CSS, mai ales când respectăm câteva principii de bază. Această animație păstrează numărul de elemente la un nivel minim și o mare utilizare a transformărilor.
Animațiile rapide pot adăuga o mulțime de caractere atunci când sunt combinate. În acest demo, vedeți cum sunt corelate bulele și stropirile pentru a crea animație drăguță cu un burete fericit, toate fără imagini.
O serie de animații de tip keyframe pot spune o poveste sau pot ajuta oamenii să înțeleagă la ce se uită. Aici vedem un plic deschis și primim o scrisoare.
Un pic de mișcare subtilă poate crea sentimente mari de intensitate! Acest încărcător are o mașină care arată ca o viteză de-a lungul vitezei, toate create cu câteva elemente și animații CSS. Fără imagini, acest lucru se va încărca rapid.
Mulțumim ca întotdeauna lui CodePen și minții creative din spatele acestor demo-uri; acestea ne-au oferit cu siguranță o sursă de inspirație în aceste exemple de animație. Verificați următoarele postări pentru mai multe dintre acestea și aflați cum să vă creați propriile animații CSS!
Accentsconagua