38 Inspirativni CSS3 animacije Demos

Od uvođenja CSS3, doista postoji mnogo vrućih rasprava koje se vrte oko njegovih mogućnosti i upotrebljivosti. Međutim, tu je i mnogo zanimljivih eksperimenata ručno izrađenih kako bi istražili njegov potencijal. Iako eksperimenti nikako ne dokazuju upotrebljivost CSS3, oni su doista pokazali prave mogućnosti CSS3, do te mjere da glavni programeri vjeruju da je CSS3 budućnost.

Je li to istina? Prosudite ga svojim očima. U ovom izlaganju nećemo pokazati ništa osim pravednog 38 nadahnjujućih demoa za animacije temeljene na CSS3 koji otkrivaju pravi potencijal CSS3. Osim čistih eksperimenata, vidjet ćete i neke praktične primjere kako se CSS3 može primijeniti na web dizajn kako bi bio slađi i seksi.

Dosta rečeno, istražimo fantastičan svijet CSS3!

Vi svibanj također biti zainteresirani za:

Vodič za početnike za CSS3
Stvaranje Rocking CSS3 okvira za pretraživanje
Izgradnja HTML5 / CSS3 web stranica
Graceful Breadcrumb Navigation Menu u CSS3
Napravite kontaktni obrazac temeljen na Ajaxu
35 Grafika izgrađena čisto s CSS3
više…

Preporučujemo vam da ove demo prikaze pogledate pomoću najnovije verzije preglednika Google Chrome Safari ili Developer. Većina demo verzija podržava najnoviju verziju Firefoxa i Google Chromea.

Animirani 3D Helix

Prvi na popisu je nevjerojatna animacija koju je izradio Marcofolio.net, koristeći CSS3 3D transformacije. Animacija izgleda sama kao magija, ali zapravo možete naučiti stvoriti sličan učinak s uputama u članku!

Animirani gumbi

Mora se vidjeti za web dizajnera, jer demo ne samo da pokazuje mogućnosti CSS3 animacije, već pruža i vrlo cool i praktične efekte za inspiraciju!

Animacije izbornika

Pokušavate začiniti izbornike za animaciju kako bi izgledali stvarno cool i kreativni? Ovaj demo je za vas.

AT-AT Walker

Inspirirajući animacijski demo koji prikazuje potencijal CSS3 na animiranju jedinice s dijelovima tijela.

Battlefield CSS3

Battlefield CSS3 s mnogo eksplozija i pucnjeva!

Velika stvar

To je glatka i lijepa animacija koja je ovaj demo učinila velikim.

Može li Haz Ur pokazivač?

“Bok, ja sam Cursor Monster. Moj tata ima poruku za vas: 'Molim vas, nemojte koristiti Pokazivač: nitko, osim ako stvorite kursor koji jede čudovište.”

CSS Dock

Seksi eksperiment koji oponaša pristanište za Mac OS X i stvarno je glatka.

CSS3 Čovjek

Pazi, dolazi CSS3 čovjek! Savršen primjer za prikaz stvarnog potencijala CSS3 animacije.

Odskakivanje kugle

Uz malu uporabu grafičkih trikova dolazi lijepa i zabavna CSS3 animacija.

Dulla

Dulla prilično pokazuje jednu od najčešćih tehnika za stvaranje 2D platformske igre, koja je sada također moguća s CSS3.

Animacija okvira po kadru

Okvir po okvir animacije s CSS3? Nema problema!

Animacija grafikona

Jednostavna, ali moćna animacija za prikazivanje / objašnjenje grafikona na web-lokaciji, učenje kako to napraviti!

visok

Tajanstvena glazbena animacija koja dinamički prikazuje slike iz Google pretraživanja u stvarnom vremenu, a prikazivanje slika temelji se na tekstovima pjesama.

Hover efekti

Budućnost efekta lebdenja dolazi s CSS3. Elegantan i obećavajući.

Ja sam Joseph Barrett

CSS3 integriran u ikone društvenih medija na portfeljskoj web-lokaciji. To nije samo zabava, već i kreativnost dizajnera.

Beskonačno zumiranje

Glatka animacija, također lijep način za prikazivanje vašeg portfelja. Ukupni zum za 26 slika je 67108864: 1.

Kinect i CSS3

“14 spojeva tijela prati se i pretvara u kratku CSS animaciju pomoću Xbox Kinecta. Podaci o tijelu unose se u preglednik gdje se raščlanjuju i pretvaraju u CSS animacije pomoću animatable.com.”

Matriks

Želite biti cool kao Matrix? S CSS3 možete uspjeti.

Morphing kocke

Eksperimentalni demo koji istražuje CSS3 koristeći 3D transformacije, animacije i prijelaze. Zanimljiv dio ovdje je da još uvijek možete odabrati tekst na elementima, čak i kada se oni još uvijek rotiraju.

Naš Sunčev sustav

Ne trebate skupi samostalni softver koji će pomoći studentima u istraživanju solarnog sustava.

Duff Roll

“Mmmmmm… .Homer bi volio beskrajnu ponudu piva.”

Krug plakata

Jednostavan, ali zanimljiv primjer koji vam pokazuje kako koristiti CSS transformaciju i animaciju kako biste postigli zanimljiv učinak.

Velečasni Opasnost

Tko može odoljeti web stranici sa stvarno slatkim likovima i zabavnim animacijama?

Rofox

Besprijekorna i zabavna animacija, pokušajte sami pokušati s izvornim kodom!

Ovce Shaun

“Gledajte Shauna i njegove prijatelje 'antics u isječcima iz' An Ill Wind ',' Snowed In ',' The Big Chase 'i' Twos Company 'kroz interaktivni eksperiment stvoren hardverski ubrzanim HTML5 videom, 3D CSS transformacijama i WebM.”

Prostor

Možda je prostor konačna granica za CSS3.

Space CaCSS

Napravite čarobni učinak kao što to zapravo nije teško s CSS3, jer postoje uglavnom samo ponavljanje-radijalnim gradijentom i Pozadina veličine uključeni. Varijacije su moguće uz razumnu količinu podešavanja.

Zvjezdani ratovi puzati

Efekt otvaranja Star Warsa! Baš kao i ep kao CSS3.

Izraziti web

Ekspresivni web ne samo da vas upoznaje s CSS3 i njegovom podrškom za preglednike, referencama i dokumentacijom, već i prikazuje svoju nevjerojatnu CSS3 animaciju na svojoj web stranici..

Glave slova

Koristeći tipove za stvaranje sjene koja izgleda kao ljudsko lice, tko bi pomislio da će to biti moguće s CSS3?

Čovjek iz Hollywooda

Jeste li ikada vidjeli te atraktivne animacije samo čistom tipografijom? Pa, možete to učiniti i sa CSS3.

Planetarij

Jednostavno epski demo o istraživanju planetarija s detaljima. Uključeni su SVG, JavaScript, HTML5, CSS3, fontovi i tipovi.

Tip kiše

“Prognoza za danas, uz pretpostavku da koristite moderan preglednik, je oblačno, sa 100% šansom za tuširanje u Gruziji.”

Učinci tipografije

Osim tipki, izbornika i efekata lebdenja, možete postići i kreativne tipografske efekte pomoću CSS3. jQuery je također uključen u ovaj demo da stilizira slova riječi.

Šetnja s Andrewom Hoyerom

Najbolje od svega, također možete naučiti hodati s Andrew Hoyer u članku!

Wonder Webkit

Prekrasna upotreba CSS3 3D transformacija s JavaScript Matrix knjižnicom. Zvuči tehničko, ali ishod je uzbudljiv.

Zoetrope

Što još ne možete učiniti s CSS3 kada je s njim moguće Zoetrope?

Odraz

Inspirativna? Da. Praktični? Možda. Tehnika animacije uvijek je tema za grebanje za programere i animatore jer zahtijeva određenu razinu znanja za izradu stvarno glatke, jedinstvene i stilske animacije. Dok CSS3 ima mogućnost napraviti animaciju, to ne znači da je to prikladan alat za animaciju. Mislim da je s vremenom još uvijek riječ o vašim željama, kao i meni, u redu sam s oboje, sve dok alat odgovara potrebama projekta.

Što mislite o tim CSS3 animacijama? Jesu li te CSS3 animacije dobre samo kao eksperimenti, ili se mogu primijeniti iu stvarnom web dizajnu? Kao i obično, pozdravljamo vašu dragocjenu misao o toj temi i obavijestite nas o svom omiljenom CSS3 animaciji!

Više

Samo izlog, stvarno? Zaslužili ste više! U nastavku se nalaze vodiči i vodiči CSS3 iz Hongkiata za vas, provedite dobro vrijeme u istraživanju!