38 Inšpirácia animácií CSS3

Od zavedenia CSS3 sa naozaj veľa horkých diskusií otáča okolo svojich možností a využiteľnosti. Existuje však aj veľa zaujímavých experimentov ručne vytvorených na preskúmanie jej potenciálu. Hoci pokusy v žiadnom prípade nepreukazujú použiteľnosť CSS3, naozaj ukázali skutočné možnosti CSS3, do tej miery, že hlavní vývojári veria, že CSS3 je budúcnosť.

Je to pravda? Rozhodnite sa to s tvojimi očami. V tejto vitríne nebudeme ukázať nič iné ako len 38 inšpiratívne demo animácie založené na CSS3 ktoré čisto zistia skutočný potenciál CSS3. Okrem čistých experimentov uvidíte aj niekoľko praktických príkladov toho, ako môže CSS3 byť aplikované do webového dizajnu, aby bolo sladšie a sexy.

Dosť povedal, skúmme fantastický svet CSS3!

Tiež by vás mohlo zaujímať:

Príručka pre začiatočníkov pre CSS3
Vytvorenie hojdacieho vyhľadávacieho poľa CSS3
Budovanie webových stránok HTML5 / CSS3
Pôvabná navigačná ponuka s názvom Breadcrumb v CSS3
Vytvorte kontaktný formulár HTML5 / CSS3 založený na programe Ajax
35 Grafika postavená čisto pomocou CSS3
viac ...

Dôrazne odporúčame zobraziť tieto ukážky pomocou najnovšej verzie prehliadača Google Chrome pre program Safari alebo pre vývojárov. Väčšina ukážok podporuje najnovšiu verziu prehliadača Firefox a prehliadača Google Chrome.

Animované 3D Helix

Prvý v zozname je neuveriteľná animácia vytvorená spoločnosťou Marcofolio.net pomocou 3D transformácií CSS3. Animácia vyzerá ako samotná mágia, ale naozaj sa naučíte vytvoriť podobný efekt s tutoriálom v článku!

Animované tlačidlá

Musíte sa pozrieť na webového dizajnéra, pretože demo nielen ukazuje možnosti animácie CSS3, ale poskytuje tiež veľmi cool a praktické efekty tlačidiel pre inšpiráciu!

Animačné ponuky

Pokúšate sa oživiť svoje animačné ponuky, aby ste vyzerali naozaj cool a kreatívny? Toto demo je pre vás.

AT-AT Walker

Inšpiratívne animačné demo, ktoré ukazuje potenciál CSS3 na animáciu jednotky s časťami tela.

Battlefield CSS3

Battlefield CSS3 s množstvom výbuchov a výstrelov!

Veľký obchod

Je to hladká a pekná animácia, ktorá urobila toto demo veľký problém.

Môže Haz Ur Cursor?

“Ahoj, som Cursor Monster. Môj papáček má pre vás správu: "Prosím, nepoužívajte Kurzor: none, s výnimkou, ak vytvoríte kurzor jesť netvor '.”

CSS Dock

Sexy experiment, ktorý napodobňuje základňu pre Mac OS X a je to naozaj hladké.

CSS3 Man

Pozrite sa, tu príde muž CSS3! Perfektný príklad na predstavenie skutočného potenciálu animácie CSS3.

Dribbling Ball Bouncing

S malým použitím grafických trikov prichádza pekná a zábavná animácia CSS3.

dulla

Dulla skoro ukazuje jednu z najbežnejších techník, ktoré sa používajú na vytvorenie 2D plošinovky, čo je teraz možné aj s CSS3.

Frame by Frame Animation

Animácia rámcovej snímky pomocou CSS3? Žiaden problém!

Animácia grafu

Jednoduchá, ale silná animácia, ktorá vám umožní zobraziť / vysvetliť graf vo vašich stránkach, naučiť sa to urobiť!

vysoký

Záhadná hudobná animácia, ktorá dynamicky zobrazuje obrázky z Vyhľadávania Google v reálnom čase a zobrazované obrázky sú založené na texte piesne.

Ovládacie efekty

Budúcnosť efektu vznášania prichádza s CSS3. Elegantný a sľubný.

Ja som Joseph Barrett

CSS3 integrované do ikon sociálnych médií portfólia. Nie je to len zábava, ale ukazuje aj kreativitu dizajnéra.

Nekonečná transfokácia

Hladká animácia, tiež pekný spôsob, ako prezentovať svoje portfólio. Celkový zoom pre 26 obrázkov je 67108864: 1.

Kinect a CSS3

“14 kĺbov tela je sledované a premenené na krátku animáciu CSS pomocou programu Xbox Kinect. Údaje o tele sa prenesú do prehliadača, kde sa analyzuje a konvertuje do animácií CSS s animatable.com.”

matice

Chcete byť tak cool ako Matrix? S CSS3 to dokážeš.

Morphing Cubes

Experimentálne demo skúmanie CSS3 pomocou 3D transformácií, animácií a prechodov. Zaujímavosťou je, že stále môžete vybrať text na elementoch, aj keď sa stále otáčajú.

Naša slnečná sústava

Nepotrebujete drahý samostatný softvér, ktorý by študentom pomohol preskúmať solárny systém.

Duff Roll

“Mmmmmm ... Homer by rád nikdy nekončí dodávku piva.”

Plagátový kruh

Jednoduchý, ale zaujímavý príklad, ktorý vám ukáže, ako používať transformáciu a animáciu CSS, aby ste dosiahli zaujímavý efekt.

Ctihodný Nebezpečenstvo

Kto môže odolávať webovým stránkam s naozaj roztomilými znakmi a zábavnými animáciami?

Rofox

Bezproblémová a zábavná animácia, získajte zdrojový kód a vyskúšajte si sám!

Shaun ovce

“Sledujte Shauna a jeho priateľov v klipoch z "An Ill Wind", "Snowed In", "The Big Chase" a "Twos Company" prostredníctvom interaktívneho experimentu vytvoreného pomocou hardvérového zrýchleného videa HTML5, 3D CSS Transforms a WebM.”

priestor

Možno, že priestor je konečný limit pre CSS3.

Priestorový CaCSS

Vytvorte magický efekt, ako je tento, nie je naozaj ťažké s CSS3, pretože tam sú hlavne spravodlivé opakujúcich sa radiálne gradient a background-size zapojiť. Variácie sú možné s primeraným množstvom vylepšení.

Star Wars prechádzanie

Hviezdny efekt otvárania hviezdnych vojen! Rovnako ako epické ako CSS3.

Expresívny web

Expresívny web vás nielen informuje o CSS3 a jeho prehliadačovej podpore, referencii a dokumentácii, ale tiež prezentuje animačné CSS3 na svojej webovej stránke.

Letter-Heads

Použitie typov na vytvorenie tieňa, ktorý vyzerá ako ľudská tvár, kto by si myslel, že by to bolo možné s CSS3?

Muž z Hollywoodu

Videli ste niekedy tie atraktívne animácie pomocou čisto typografie? Môžete to urobiť aj pomocou CSS3.

Planetárium

Jednoducho epické demo na preskúmanie planetária s detailmi. SVG, JavaScript, HTML5, CSS3, písma a typy.

Typ Dažďa

“Predpoveď pre dnešok, za predpokladu, že používate moderný prehliadač, je zakalená, so 100% pravdepodobnosťou Gruzínska sprcha.”

Typografické efekty

Okrem tlačidla, menu a efektov vznášania môžete dosiahnuť aj kreatívne efekty s CSS3. jQuery je tiež zapojený do tohto demo štýlu písmen slová.

Chôdza s Andrewom Hoyerom

Najlepšie zo všetkých, môžete sa naučiť chodiť s Andrew Hoyer v článku!

Wonder Webkit

Báječné využitie 3D transformácií CSS3 s knižnicou Matrix JavaScript. Znie to technicky, ale výsledok je hojne chladný.

Zoetrope

Čo ešte nemôžete robiť s CSS3, keď je s ním možné Zoetrope?

odraz

Inšpirujúca? Áno. Praktické? Možno. Animačná technika je vždy hlavným predmetom pre vývojárov a animátorov, pretože vyžaduje určitú úroveň vedomostí na vytvorenie skutočne hladkej, jedinečnej a štýlovej animácie. Zatiaľ čo CSS3 má možnosť urobiť animáciu, neznamená to, že je to vhodný nástroj pre animáciu. Myslím, že nakoniec je to stále o vašich preferenciách, pokiaľ ide o mňa, som v poriadku s oboma, pokiaľ to vyhovuje potrebám projektu.

Čo si myslíte o týchto animáciách CSS3? Sú tieto animácie CSS3 iba dobré ako experimenty, alebo môžu byť použité aj v reálnom dizajne webových stránok? Ako obvykle, vítame vaše vzácne myšlienky na túto tému a dajte nám vedieť aj vašu obľúbenú animáciu CSS3!

viac

Len showcase, naozaj? Zaslúžiš si získať viac! Nižšie sú kurzy a sprievodcovia CSS3 z Hongkiatu pre vás, máte pekný čas objavovať ich!