30 Cool CSS animacije koje morate vidjeti
Prethodno smo objavili kreativne tekstualne efekte koje možete napraviti pomoću CSS-a i mnoge druge zanimljive stvari za koje niste mislili da bi ih mogli napraviti s CSS-om. Ova kompilacija se usredotočuje na mnoge stvari koje možete animirati pomoću CSS-a, a mnoge od tih kreacija natjerat će vas da podignete obrvu ili dvije.
Od animacija učitavanja do izmjenjivanja i modalnih prozora do elemenata koji trese, ove hrpe 30 neobičnih i kreativnih upotreba CSS animacije možete otvoriti vaš um za više načina na koje možete igrati s CSS animacijama o kojima vjerojatno nikad prije niste razmišljali.
CSS Loading Animacija Autor patrikhjelm
Sedam animiranih točaka pomiče se lijevo i desno kako bi označile akciju učitavanja.
Animirani Košarica Icon po jonitrythall
Slatki animirani efekti kada se namirnice dodaju u košaricu. Pomaknite se dolje za više.
Hamburger CSS3 samo animacija Dawida Krajewskog
Napravljen od čistog CSS-a, bez JS-a ili bilo čega drugog.
404 animirani lik pomoću Es
Barem s ovom stranicom pogreške programer radi na tome. Čak i ako je 404.
CSS Mars Slijetanje od Mitchitcha
Sletjeli smo na Mars! Izrađeno pomoću CSS-a.
Osvetnik Mariosmaselli
Možete li čuti hulkovu ljutnju koja se tresla kroz zaslon? Kul, dobro?
Dan / Noć prekidač Jsndks
Sada možete mijenjati dan i noć pomoću CSS-a. Genijalna ideja!
Aplikacija treće strane usluge Google Now pomoću kodeksa
Aplikacije Googleovih trećih strana, animirane.
Clo clo Do judag
Da li se pijetao kreće tako? Možete se kladiti da je tako, zajedno s jiggy vratom. Velika CSS3 praksa.
Animacija ikone izbornika mariusbalaj
Jednostavna ideja stavljena u akciju; gledajte kako se gumb izbornika materijalizira kada se pomaknete prema dolje.
Još jedan CSS Preloader od Maseonea
Nevjerojatna CSS ritmička učitava animacija. Hipnotičan, zar ne?
Gumb za predaju putem aligatora
Kliknite za slanje, a gumb animira postupak učitavanja dok se dostava ne dovrši!
Elastični SVG Sidebar Materijal Dizajn suez
Povucite bijelu traku udesno da biste vidjeli elastični efekt bočne trake.
Tipka čestica Od igcorreia
Učinite ono što vam kaže gumb: lebdite za nevjerojatnu.
Gooey gumb Lucas Bebber
Kliknite za Gooey efekt. Dobit ćete ga jednom kada ga vidite, pa ćete kliknuti na njega nekoliko puta više. Amirite?
Prekidač za gumb
Kliknite na bilo koju stranu gumba Delete (Obriši) i gumb će se okrenuti prema mjestu na koje kliknete.
Pravi jelovnik hamburgera! Autor CharlesSmart
Doista ukusna jela od hamburgera. Kliknite na hamburger za efekte
Kružite po yy
Vidi motocikl ići.
3D val kocke By waddington
Svete 3D kocke!
Animacija potpisa By drygiel
Evo potpisa koji zapravo nije GIF animacija, već PNG sekvenca animirana s CSS3.
Pozadinska gradijentna animacija By quasimondo
Ovaj trik mijenja pozadinski gradijent iz jedne boje u drugu u glatkom, kontinuiranom obliku.
Ikona za uključivanje zvjezdanih ratova Po rss
Izbornik hamburgera postaje bitka (križ).
GIF stil animacije By jascha
Gledajte kako se fotografija materijalizira iz sredine piksela.
Fokusiranje ulazne / izlazne animacije By fluxus
Malo animirane olovke animirano piše na vrhu forom kojeg popunjavate.
Kromatski trokutBa felipedefarias
Sjajna optička iluzija, da, učinjeno s CSS3.
Aparat za kavu
Evo podsjetnika da uzmete dnevnu dozu kave. Kao što ti treba.
Chrome Dinosaur Nickspiel
Ne možete doći do stranice koju želite zbog povučene veze? Evo dinosaura kojeg uvijek vidite kada se to dogodi, samo ovaj put bježi od meteora!
CSS trešnja
Lebdite iznad svakog efekta kako biste gledali kako se malčice tresu.
Newtonov utovarivač kolijevke po svim stvarima Smitty
Ako poznajete fiziku, sigurno znate Newtonovu kolijevku, ali vjerojatno ne ovako.
Pokrenite Modal By koolhaus
Kliknite da biste vidjeli lijepu i glatku animaciju modalnih prozora.
Robot za hodanje P233
Ovaj robot nastavlja hodati, hodati i hodati oko Y osi.
Naprećući strelice za označavanje po Hakimu
Od prve do zadnje stranice, ova animacija naziva jasno pokazuje kako, ako idete, po strani.
Sada pročitajte: 15 prekrasnih tekstualnih efekata stvorenih pomoću CSS-a
