Accentsconagua
Share
CodePen devine rapid un loc de întâlnire pentru a arăta ce putem face cu creatiile noastre web. Iată o listă a unor lucruri minunate pe care oamenii le-au creat cu animațiile CSS recent!
Notă: pentru mai multă inspirație, aruncați o privire la ultimul meu post:
Apple ceas ca ceasul Mickey de Jay Salvat (@jaysalvat).
Acesta este un exemplu minunat de combinare a tranzițiilor CSS, graficii SVG și JavaScript pentru a poziționa mâinile pe o față de ceas drăguță Mickey Mouse.
Submarin cu CSS de Alberto Jerez (@ajerez).
Folosirea minunată a containerului circular, cu formă de gură, dă acestui submarin animat CSS o mulțime de farmec.
AT-AT de Tim Pietrusky (@TimPietrusky).
Star Wars a inspirat transportatorul de personal AT-AT, desenat folosind textul cu culorile ciclate în CSS. Un efect funky.
Loader SVG / CSS de Bidji (@Bidji).
Acest încărcător folosește culorile în schimbare pentru a da impresia de rotire.
3D CSS Tardis de Gerwin van Royen (@Gerwinnz).
CSS poate fi folosit pentru a crea unele efecte 3D uimitoare. Iată un tardis 3D:
Dozing Bird de Peter Klein (@pmk).
Stilul artistic simplu și doar cantitatea potrivită de animație dau acestei păsări somnoroase iluzia vieții.
Pure animație frontală CSS fără SVG de către Rplus (@rplus).
Utilizarea simplă, dar foarte eficientă a granițelor CSS pentru a crea o animație în stil de încărcare.
Star Wars: Forța trezeste în CSS de Donovan Hutchinson (@donovanh).
Titlul din viitorul film Star Wars creat folosind CSS, HTML și un mic JavaScript.
Pure CSS 3D Sintetizator (mousedown pentru rotație) de Nikolay Talanov (@suez).
Încercați cheile și rotiți acest sinteză 3D creată utilizând CSS. Lucrare uimitoare:
Cascadă Sistemul Solar! de Tady Walsh (@tadywankenobi).
Un model al sistemului nostru solar, complet cu viteza de rotatie scalata, lunile si detalii pe fiecare dintre cele mai mari planete. Soarele este chiar o capturare vie a lucrurilor reale!
Sistem complet solar CSS 3D de Wayne Dunkley (@waynedunkley).
Un alt sistem solar, dar de data aceasta în 3D. Folosirea frumoasă a umbririi.
Camera de design plat cu animație CSS de Damien Pereira Morberto (@damienpm).
Apăsați declanșatorul pe această cameră plată pentru a vedea cum creează o fotografie utilizând animația CSS.
Simularea zilei de noapte de Szymon Stypa (@Catagen).
Apăsați butonul pentru a vedea transformarea zilei în noapte.
Animați sprite cu CSS de Avaz Bokiev (@samarkandiy).
O demonstrație a modului în care o secvență de imagini (sprite) poate fi utilizată pentru a crea animație stop-motion, completă cu mișcare înainte și înapoi.
Dodecahedron by wontem (@wontem).
Un dodecahedron subtil, frumos creat și animat în întregime cu CSS.
Animațiile CSS sunt o categorie în creștere și pe Envato Market. Dacă doriți să utilizați efecte de animație în proiectele dvs., puteți găsi totul, de la umbre la efecte de afișare a imaginii, cutii de lumină și multe altele.
CSS animații populare pe Envato MarketNu cu mult timp în urmă, ne-am fi aplecat pe instrumente Flash sau JavaScript pentru orice animație în browser. Browserele moderne au adus un suport mai bun pentru CSS, cu accelerare hardware 3D și animație.
Datorită unor site-uri precum CodePen, putem să ne împărtășim și să învățăm mai ușor decât oricând. Care sunt unele dintre cele mai inspirative demo-uri de animație pe care le-ați văzut recent?
Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.
