38 Iedvesmojošas CSS3 animācijas demonstrācijas

Kopš CSS3 ieviešanas patiešām ir daudz karstu debašu par tās iespējām un lietojamību. Tomēr ir arī daudz interesantu eksperimentu ar rokām, lai izpētītu tās potenciālu. Lai gan eksperimenti nekādā veidā nepierāda CSS3 lietojamību, viņi patiešām parādīja CSS3 patiesās iespējas tādā mērā, ka lielākie izstrādātāji uzskata, ka CSS3 ir nākotne.

Vai tā ir taisnība? Spriediet to ar acīm. Šajā vitrīnā mēs parādīsim neko citu, kā tikai 38 iedvesmojošas CSS3 animācijas demonstrācijas kas tikai atklāj CSS3 patieso potenciālu. Papildus tīriem eksperimentiem jūs redzēsiet arī praktiskus piemērus par to, kā CSS3 var izmantot web dizainā, lai padarītu to saldāku un seksīgāku.

Pietiekami teica, izpētīsim fantastisko CSS3 pasauli!

Iespējams, jūs interesē arī:

Iesācēja ceļvedis CSS3
Radošā CSS3 meklēšanas lodziņa izveide
HTML5 / CSS3 tīmekļa lapu veidošana
Graciozs Breadcrumb navigācijas izvēlne CSS3
Izveidojiet Ajax bāzes HTML5 / CSS3 kontaktu formu
35 Tikai ar grafiku, kas veidota ar CSS3
vairāk…

Ir ļoti ieteicams apskatīt šos demonstrējumus, izmantojot jaunāko Safari vai izstrādātāja Google Chrome versiju. Lielākā daļa demo atbalsta jaunāko Firefox un Google Chrome versiju.

Animēts 3D spirāle

Pirmais sarakstā ir neticama animācija, ko izstrādājusi Marcofolio.net, izmantojot CSS3 3D transformācijas. Animācija izskatās kā maģija, bet jūs faktiski varat iemācīties veidot līdzīgu efektu ar rakstu!

Animētas pogas

Nepieciešams redzēt web dizaineri, jo demo ne tikai parāda CSS3 animācijas iespējas, bet arī sniedz ļoti atdzist un praktiskas pogas sekas iedvesmai!

Animācijas izvēlnes

Mēģinot savākt savas animācijas izvēlnes, lai tās izskatītos tiešām atdzist un radošas? Šī demonstrācija ir paredzēta jums.

AT-AT Walker

Iedvesmojošs animācijas demonstrējums, kas parāda CSS3 potenciālu, lai animētu vienību ar ķermeņa daļām.

Battlefield CSS3

Battlefield CSS3 ar daudz sprādzienu un šāvienu!

Big Deal

Tā ir gluda un jauka animācija, kas padarīja šo demonstrāciju par lielu darījumu.

Vai var Ur Ur kursors?

“Sveiki, es esmu Cursor Monster. Manai papai jums ir ziņojums: „Lūdzu, nelietojiet kursors: nav, izņemot gadījumus, kad jūs izveidojat kursoru, kas ēd monstru..”

CSS dokstacija

Seksīgs eksperiments, kas atdarina Mac OS X doku, un tas ir patiešām gluds.

CSS3 Cilvēks

Paskaties, šeit nāk CSS3 cilvēks! Ideāls piemērs, lai parādītu CSS3 animācijas patieso potenciālu.

Dribbble Ball Bouncing

Ar nelielu grafisko triku izmantošanu nāk jauka un jautra CSS3 animācija.

Dulla

Dulla diezgan daudz parāda vienu no visizplatītākajām metodēm, ko izmanto, lai izveidotu 2D platformas spēli, kas tagad ir iespējama arī ar CSS3.

Rāmis pēc kadra animācijas

Ar kadru animācija ar CSS3? Nekādu problēmu!

Grafika animācija

Vienkārša, bet spēcīga animācija, lai jūs varētu parādīt / izskaidrot grafiku savā vietnē, iemācīties to izdarīt!

Augsts

Noslēpumaina mūzikas animācija, kas dinamiski attēlo attēlus no Google meklēšanas reālā laikā, un attēlotie attēli ir balstīti uz dziesmu vārdiem.

Hover Effects

Hover efekta nākotne nāk ar CSS3. Gluds un daudzsološs.

Es esmu Džozefs Barrets

CSS3 integrēta portfeļa vietnes sociālo mediju ikonās. Tas ir ne tikai jautri, bet arī dizaina radošums.

Bezgalīga tālummaiņa

Gluda animācija, arī jauks veids, kā parādīt savu portfeli. Kopējais tālummaiņa 26 attēliem ir 67108864: 1.

Kinect un CSS3

“14 ķermeņa savienojumi tiek izsekoti un pārvērsti par īsu CSS animāciju, izmantojot Xbox Kinect. Ķermeņa dati tiek ieviesti pārlūkprogrammā, kur tiek analizēti un pārvērsti CSS animācijās ar animatable.com.”

Matrica

Vēlaties būt tikpat atdzist kā Matrix? Ar CSS3 jūs varat to izdarīt.

Morphing kubi

Eksperimentālā demonstrācija, kurā tiek pētīta CSS3, izmantojot 3D transformācijas, animācijas un pārejas. Interesanta daļa šeit ir, ka jūs joprojām varat atlasīt tekstu uz elementiem, pat ja tie joprojām rotē.

Mūsu Saules sistēma

Jums nav nepieciešama dārga savrupā programmatūra, lai palīdzētu studentiem izpētīt saules sistēmu.

Duff Roll

“Mmmmmm… Homer mīlētu nekad nebeidzamu alus piegādi.”

Plakātu loks

Vienkāršs, bet interesants piemērs, kā parādīt, kā izmantot CSS transformāciju un animāciju, lai panāktu interesantu efektu.

Godātais briesmas

Kas var pretoties tīmekļa vietnei, kurā ir patiešām gudras rakstzīmes un jautras animācijas?

Rofox

Bezšuvju un jautra animācija, iegūstiet avota kodu, lai izmēģinātu pats!

Auniņš Šons

“Skatieties Shaun un viņa draugu antikātus klipus no „Neliels vējš”, “Sniegs”, “Lielais posms” un “Twos Company”, izmantojot interaktīvu eksperimentu, kas izveidots ar aparatūras paātrinātu HTML5 video, 3D CSS transformācijām un WebM.”

Kosmoss

Varbūt vieta ir CSS3 galīgais ierobežojums.

Space CaCSS

Izveidojiet maģisku efektu, kā tas nav īsti grūti ar CSS3, jo ir galvenokārt taisnība atkārtots radiālais gradients un fona izmērs iesaistīti. Variācijas ir iespējamas ar saprātīgu daudzumu tweaks.

Star Wars rāpošana

Star Wars atklāšanas efekts! Tikpat episks kā CSS3.

Expressive Web

Izteiksmīgā tīmekļa vietne ne tikai iepazīstina jūs ar CSS3 un tā pārlūkprogrammas atbalstu, atsauci un dokumentāciju, bet arī demonstrē prātā izplūstošu CSS3 animāciju savā tīmekļa lapā.

Vēstules vadītāji

Izmantojot veidus, lai radītu ēnu, kas izskatās kā cilvēka seja, kurš būtu domājis, ka tas būtu iespējams ar CSS3?

Vīrietis no Holivudas

Kādreiz redzējāt šīs pievilcīgās animācijas, izmantojot tikai tīru tipogrāfiju? Nu, jūs varat to darīt arī ar CSS3.

Planetārijs

Vienkārši episks demo par planētas izpēti ar detaļām. Ir iesaistīti SVG, JavaScript, HTML5, CSS3, fonti un veidi.

Tips Rains

“Šodienas prognoze, pieņemot, ka lietojat modernu pārlūkprogrammu, ir duļķaina, ar 100% izredzes uz Gruzijas dušas.”

Tipogrāfijas efekti

Bez pogas, izvēlnes un lidojuma efektiem jūs varat arī sasniegt radošas tipogrāfijas efektus ar CSS3. JQuery ir iesaistīts arī šajā demonstrācijā, lai veidotu vārdu burtu.

Pastaiga ar Andrew Hoyer

Best of all, jūs varat arī iemācīties staigāt ar Andrew Hoyer rakstā!

Wonder Webkit

Lieliska CSS3 3D transformāciju izmantošana ar JavaScript Matrix bibliotēku. Izklausās tehniski, bet rezultāts ir šūpojošs.

Zoetrope

Ko vēl nevar darīt ar CSS3, kad Zoetrope ir iespējams ar to?

Pārdomas

Iedvesmojošs? Jā. Praktiski? Varbūt. Animācijas tehnika vienmēr ir priekšmetu attīstītājs un animators, jo tas prasa zināmu zināšanu līmeni, lai radītu patiesi gludu, unikālu un stilīgu animāciju. Kaut arī CSS3 ir iespēja veikt animāciju, tas nenozīmē, ka tas ir piemērots instruments animācijai. Es domāju, ka galu galā tas joprojām ir par jūsu vēlmēm, kā man, es esmu labi ar abiem, kamēr rīks atbilst projekta vajadzībām.

Kāda ir jūsu doma par šīm CSS3 animācijām? Vai šīs CSS3 animācijas ir labas tikai kā eksperimenti, vai arī tās var tikt izmantotas reālajā dzīvē? Kā parasti, mēs atzinīgi vērtējam jūsu vērtīgo domu par šo tēmu, un dariet mums zināmu arī savu iecienītāko CSS3 animācijas gabalu!

Vairāk

Vienkārši demonstrējiet? Jūs esat pelnījuši, lai iegūtu vairāk! Zemāk ir norādījumi un vadlīnijas no CSS3 no Hongkiat jums, jums ir jauks laiks to izpētīt!