38 Navdihujoče CSS3 animacije Demos

Ker je uvedba CSS3, obstaja res veliko vročih razprav vrti okoli njegove možnosti in uporabnosti. Obstaja pa tudi veliko zanimivih poskusov, ki so ročno izdelani za raziskovanje njegovega potenciala. Čeprav poskusi nikakor ne dokazujejo uporabnosti CSS3, so resnično pokazali resnične možnosti CSS3, do te mere, da veliki razvijalci verjamejo, da je CSS3 prihodnost.

Je to res? Ocenite ga s svojimi očmi. V tej predstavitvi ne bomo pokazali nič drugega kot samo 38 navdihujočih demonov za animacije na osnovi CSS3 ki odkrijejo pravi potencial CSS3. Poleg čistih eksperimentov boste videli tudi nekaj praktičnih primerov, kako lahko CSS3 uporabite v spletnem oblikovanju, da bo bolj slaven in seksi.

Dovolj je bilo, raziščimo fantastičen svet CSS3!

Morda vas zanimajo tudi:

Vodnik za začetnike za CSS3
Ustvarjanje iskalnega polja za iskanje CSS3
Izdelava spletnih strani HTML5 / CSS3
Graceful Breadcrumb Navigation Menu v CSS3
Ustvarite kontaktni obrazec HTML5 / CSS3, ki temelji na Ajaxu
35 Grafika je zgrajena samo s CSS3
več…

Priporočamo vam, da si ogledate te predstavitve z najnovejšo različico brskalnika Google Chrome Safari ali različico za razvijalce. Večina demonov podpira najnovejšo različico Firefoxa in Google Chroma.

Animirana 3D spirala

Prvi na seznamu je neverjetna animacija, ki jo je ustvaril Marcofolio.net, z uporabo 3D transformacij CSS3. Animacija je sama po sebi čarobna, vendar se lahko dejansko naučite ustvariti podoben učinek z vadnico v članku!

Animirani gumbi

Nepogrešljivo za spletne oblikovalce, saj demo ne prikazuje le možnosti CSS3 animacije, temveč ponuja tudi zelo kul in praktične učinke gumbov za navdih.!

Animacije Meniji

Poskušate začiniti menije za animacijo, da bodo videti res kul in ustvarjalni? Ta demo je za vas.

AT-AT Walker

Navdihujoči demo animacije, ki prikazuje potencial CSS3 za animacijo enote z deli telesa.

Battlefield CSS3

Battlefield CSS3 z veliko eksplozijami in strelami!

Velik dogovor

To je gladka in lepa animacija, ki je ta demo naredila veliko.

Lahko Haz Ur Kurzor?

“Živjo, jaz sem Cursor Monster. Moj oče ima za vas sporočilo: 'Prosim, ne uporabljajte kazalec: nič, razen če ustvarite kurzorja, ki jedo pošast.”

CSS Dock

Seksi eksperiment, ki posnema pristanišče za Mac OS X, in je res gladko.

CSS3 Človek

Pazi, prihaja CSS3 človek! Odličen primer za prikaz resničnega potenciala animacije CSS3.

Odskakivanje krogle

Z majhno uporabo grafičnih trikov prihaja lepo in zabavno animacijo CSS3.

Dulla

Dulla precej kaže eno izmed najpogostejših tehnik, uporabljenih pri ustvarjanju 2D platformne igre, ki je sedaj možna tudi s CSS3.

Animacija Frame by Frame

Animacija z okvirjem po okvirju s CSS3? Ni problema!

Animacija grafa

Preprosta, a zmogljiva animacija za prikaz / razlago grafa na vašem spletnem mestu, za učenje!

Visoka

Skrivnostna glasbena animacija, ki dinamično prikazuje slike iz Google Iskanje v realnem času, prikaz slik pa temelji na besedilih pesmi.

Učinki hoverja

Prihodnost hover učinka prihaja s CSS3. Gladka in obetavna.

Jaz sem Joseph Barrett

CSS3 je vključen v ikone socialnih medijev na spletnem mestu portfelja. To ni samo zabava, ampak tudi ustvarjalnost oblikovalca.

Infinite Zoom

Gladka animacija, tudi lep način, da pokažete svoj portfelj. Skupni zoom za 26 slik je 67108864: 1.

Kinect in CSS3

“14 telesnih spojev se spremlja in pretvori v kratko CSS animacijo z uporabo Xbox Kinecta. Podatki o telesu se prenesejo v brskalnik, kjer se razčlenijo in pretvorijo v animacije CSS z animatable.com.”

Matrix

Želite biti kul kot Matrix? Z CSS3 ga lahko naredite.

Morfing kocke

Eksperimentalni demo, ki raziskuje CSS3 z uporabo 3D transformacij, animacij in prehodov. Zanimiv del tukaj je, da lahko še vedno izberete besedilo na elementih, tudi če se še vedno vrtijo.

Naš sončni sistem

Ne potrebujete drage samostojne programske opreme za pomoč študentom pri raziskovanju sončnega sistema.

Duff rol

“Mmmmmm… .Homer bi se veselil neprekinjene ponudbe piva.”

Poster Circle

Preprost, a zanimiv primer, ki vam pokaže, kako uporabiti CSS transformacijo in animacijo za doseganje zanimivega učinka.

Častitljiva nevarnost

Kdo se lahko upre spletnemu mestu z resnično srčkanimi liki in zabavnimi animacijami?

Rofox

Brezšivne in zabavne animacije, poizkusite sami z izvorno kodo!

Ovce Shaun

“Oglejte si Shauna in njegove prijatelje izvirnike v posnetkih iz "An Ill Wind", "Snowed In", "Big Chase" in "Twos Company" z interaktivnim eksperimentom, ustvarjenim s strojno pospešenim videom HTML5, 3D CSS Transforms in WebM.”

Vesolje

Morda je prostor končna omejitev za CSS3.

Vesolje CaCSS

Ustvarite čarobni učinek, kot to ni res težko z CSS3, saj so v glavnem pravkar ponavljajoč se radialni gradient in velikost ozadja vključeni. Variacije so možne z razumno količino popravkov.

Star Wars Crawl

Učinek odprtja zvezdne vojne! Enako epski kot CSS3.

Ekspresivni splet

Ekspresivna spletna stran vas ne predstavi samo o CSS3 in njeni podpori brskalniku, referencah in dokumentaciji, temveč tudi predstavi osupljivo animacijo CSS3 na svoji spletni strani..

Črke pisem

Z uporabo tipov ustvarite senco, ki izgleda kot človeški obraz, ki bi mislila, da bo to mogoče s CSS3?

Človek iz Hollywooda

Si kdaj videl te privlačne animacije samo s čisto tipografijo? Tudi to lahko storite s CSS3.

Planetarij

Preprosto epski demo o raziskovanju planetarija s podrobnostmi. Vključeni so SVG, JavaScript, HTML5, CSS3, pisave in vrste.

Tip Rains

“Napoved za danes, ob predpostavki, da uporabljate sodoben brskalnik, je oblačna, s 100% možnostjo prhanja v Gruziji.”

Učinki tipografije

Poleg gumbov, menijev in hover efektov lahko s CSS3 dosežete ustvarjalne tipografske učinke. jQuery je prav tako vključen v ta demo za slog črk besed.

Hoja z Andrew Hoyerjem

Najboljše od vsega, lahko se naučite hoditi z Andrew Hoyerjem v članku!

Zanima me Webkit

Čudovita uporaba CSS3 3D transformacij s knjižnico JavaScript Matrix. Sliši se tehnično, vendar je rezultat hudo hladen.

Zoetrop

Kaj še ne morete storiti s CSS3, ko je z njim možna Zoetrope?

Razmišljanje

Navdih? Da. Praktično? Mogoče. Animacijska tehnika je za razvijalca in animatorja vedno tema za glave, saj zahteva določeno raven znanja za izdelavo res gladke, edinstvene in elegantne animacije. Čeprav CSS3 omogoča animacijo, to ne pomeni, da je to primerno orodje za animacijo. Mislim, da na koncu še vedno govorim o vaših preferencah, saj sem v redu z obema, če orodje ustreza potrebam projekta.

Kaj mislite o teh animacijah CSS3? Ali so te animacije CSS3 dobre le kot poskusi, ali pa se lahko uporabijo tudi v realnem spletnem oblikovanju? Kot ponavadi pozdravljamo vašo dragoceno misel na to temo in nam sporočite tudi vaš najljubši kos animacije CSS3!

Več

Samo izložba, res? Zaslužili ste si več! Spodaj so opisane vadnice in vodniki CSS3 iz Hongkiata za vas!