30 Cool CSS animacije, ki jih morate videti
Pred kratkim smo objavili ustvarjalne učinke besedila, ki jih lahko naredite s CSS-jem, in številne druge kul stvari, za katere niste mislili, da bi jih lahko naredili s CSS. Ta kompilacija pa se osredotoča na številne stvari, ki jih lahko animirate s CSS-jem, in mnoge od teh stvaritev vam bodo pomagale dvigniti obrvi ali dve..
Od animacij nalaganja do preklopov in modalnih oken do elementov tresenja, ta kup 30 nenavadnih in ustvarjalnih uporab CSS animacije lahko odprete vaš um za več načinov igranja s CSS animacijami, o katerih verjetno niste nikoli prej razmišljali.
CSS Loading Animacija Z patrikhjelm
Sedem animiranih pik, ki se premikajo levo in desno, da označijo akcijo nalaganja.
Animirani nakupovalni voziček Icon jonitrythall
Ljubke animirane učinke, ko se živila dodajo v nakupovalni voziček. Pomaknite se navzdol za več.
Hamburger CSS3 samo animacija Dawida Krajewskega
Vgrajen s čistim CSS, brez JS ali karkoli drugega.
404 animirani znak z Es
Vsaj s to stranjo o napaki razvijalec dela na tem. Tudi če je 404.
CSS Mars Landing, ki ga je naredil mgitch
Pristali smo na Marsu! Izdelano s CSS.
Osvetnik mariosmaselli
Ali lahko slišite hulkovo jezo, ki se pretrese skozi zaslon? Cool, prav?
Preklop z dne / noči z jsndks
Zdaj lahko z CSS preklopite dan in noč. Genialna ideja!
Aplikacija tretje osebe Google Now s kodeklom
Aplikacije aplikacije Google Now, animirane.
Clo clo By judag
Ali se petelin premika tako? Stavim, da je, skupaj z Jiggy vratu. Velika praksa CSS3.
Animacija ikone menija mariusbalaj
Preprosta ideja, ki se izvaja; ko se pomaknete navzdol, si oglejte gumb menija.
Še en CSS Preloader, ki ga je ustvaril Maseone
Odlična animacija za ritmično nalaganje CSS. Hipnotičen, kajne?
Gumb za pošiljanje s strani avgatorja
Kliknite, da pošljete, in gumb animira postopek nalaganja, dokler predložitev ni končana!
Elastični SVG Sidebar Material Design by suez
Povlecite belo vrstico v desno, da vidite elastični učinek stranske vrstice.
Tipka za delce Z igcorreia
Naredite, kar pravi gumb: lebdite za čudovito.
Gooey gumb Lucas Bebber
Kliknite za učinek Gooey. Dobili ga boste, ko ga boste videli, in kliknite nekajkrat več. Amirit?
Zaslonska tipka Pri hakimelu
Kliknite na katero koli stran gumba Izbriši in gumb se bo obrnil glede na to, kje kliknete.
Resnični meni za hamburger! Avtor CharlesSmart
Resnično okusen meni z hamburgerjem. Kliknite na hamburger za učinke
Križaj z yy
Glej motorno kolo.
3D kocka val Waddington
Sveti 3D kocki-sikli!
Animacija podpisa S suho
Tukaj je podpis, ki dejansko ni GIF animacija, ampak zaporedje PNG, animirano s CSS3.
Animacija za gradient ozadja By quasimondo
Ta trik spreminja gradient ozadja iz ene barve v drugo v gladki, kontinuirani obliki.
Ikona za vklop zvezdnih vojn Z rss
Meni v hamburgerju postane bitka (križ).
Animacija GIF Style By jascha
Oglejte si, kako se fotografija ustvari iz sredine slikovne pike.
Osredotočite se na vhodno / izstopno animacijo
Malo animiranega animiranega pisala na plošči, ki jo polnite, piše na vrhu.
Kromatični trikotnikBy felipedefarias
Odlična optična iluzija, da, končana s CSS3.
Aparat za kavo
Tu je opomnik, da vzamete dnevni odmerek kave. Kot da ga potrebuješ.
Chrome Dinosaur Z nickspiel
Ne morete priti do strani, ki jo želite zaradi padle povezave? Tukaj je dinozaver, ki ga vedno vidiš, ko se to zgodi, le tokrat teče od meteorita!
CSS tresenje Z elrumordelaluz
Lebdite nad vsakim učinkom in opazujte, kako se malček stresa.
Newton's Cradle Loader Z vsemi Smitty
Če poznaš fiziko, zagotovo poznaš Newtonovo zibelko, a verjetno ne tako.
Odprite Modal By koolhaus
Kliknite, če želite videti lepo in gladko animacijo modalnih oken.
Robot za hojo po P233
Ta robot samo hodi, hodi in hodi okoli osi Y.
Flexing Pagination Arrows Z Hakim
Od prve strani do zadnje, ta animacija paginacij jasno kaže, kako, če se spočite, po stran.
Sedaj preberite: 15 lepih besedilnih učinkov, ustvarjenih s CSS
