38 Įkvepiančios CSS3 animacijos demonstracijos

Nuo CSS3 įdiegimo yra daug karšto debatų, susijusių su jo galimybėmis ir naudojimu. Tačiau taip pat yra daug įdomių eksperimentų rankomis, siekiant ištirti jo potencialą. Nors bet kokiu būdu eksperimentai neįrodo CSS3 tinkamumo, jie iš tikrųjų parodė tikras CSS3 galimybes tiek, kad pagrindiniai kūrėjai tiki, kad CSS3 yra ateitis.

Ar tai tiesa? Teisėjas jį akimis. Šioje vitrinoje nieko nerodysime 38 įkvepiantys CSS3 animaciniai demonstraciniai demonstracijos tai tiktai atranda tikrąjį CSS3 potencialą. Be grynų eksperimentų, jūs taip pat pamatysite keletą praktinių pavyzdžių, kaip CSS3 gali būti pritaikytas interneto dizainui, kad jis būtų saldesnis ir seksualesnis.

Pakankamai pasakėme, pažvelkime fantastišką CSS3 pasaulį!

Galbūt jus domina:

Pradedančiųjų vadovas CSS3
„Rocking CSS3“ paieškos laukelio kūrimas
HTML5 / CSS3 tinklalapių kūrimas
Grakštus Breadcrumb navigacijos meniu CSS3
Sukurti „Ajax“ pagrįstą HTML5 / CSS3 kontaktinę formą
35 Tik CSS3 sukurta grafika
daugiau…

Labai rekomenduojama peržiūrėti šiuos demonstravimus naudodami naujausią „Google Chrome“ „Safari“ arba „Developer“ versiją. Dauguma demo palaiko naujausią „Firefox“ ir „Google Chrome“ versiją.

Animuota 3D spiralė

Pirmasis sąraše yra neįtikėtinas Marcofolio.net animacija, naudojant CSS3 3D transformacijas. Animacija atrodo pati magija, bet iš tiesų galite išmokti sukurti panašų efektą su pamoka šiame straipsnyje!

Animuoti mygtukai

Būtinas internetinio dizainerio vaizdas, nes demo demonstruoja ne tik CSS3 animacijos galimybes, bet ir suteikia labai vėsius ir praktiškus mygtukų efektus įkvėpimui!

Animacijos meniu

Bandote prikelti savo animacinius meniu, kad jie atrodytų tikrai kieti ir kūrybingi? Šis demonstravimas skirtas jums.

AT-AT Walker

Įkvepiantis animacinis demonstravimas, rodantis CSS3 potencialą animuoti įrenginį su kūno dalimis.

Battlefield CSS3

„Battlefield CSS3“ su daug sprogimų ir šūvių!

Didelis reikalas

Tai sklandus ir malonus animavimas, dėl kurio šis demonstravimas buvo didelis dalykas.

Ar gali „Ur Ur“ žymeklis?

“Sveiki, aš esu žymeklio monstras. Mano papa turi jums žinią: „Prašau, nenaudokite žymeklis: nėra, išskyrus atvejus, kai kuriate žymeklį, kuris valgo monstrą “.”

CSS dokas

Seksualus eksperimentas, imituojantis „Mac OS X“ doką ir tikrai sklandus.

CSS3 žmogus

Žiūrėkite, čia ateina CSS3 žmogus! Puikus pavyzdys, kaip parodyti tikrąjį CSS3 animacijos potencialą.

Dribbble Ball Bouncing

Su nedideliu grafinių triukų naudojimu yra graži ir linksma CSS3 animacija.

Dulla

Dulla beveik parodo vieną iš labiausiai paplitusių metodų, naudojamų 2D platformingo žaidimo kūrimui, kuris dabar yra galimas ir su CSS3.

Rėmelis pagal rėmo animaciją

Rėmelio rėmelio animacija su CSS3? Jokiu problemu!

Grafikas animacija

Paprasta, bet galinga animacija, kuria galite parodyti / paaiškinti savo svetainės grafiką, išmokti ją padaryti!

Aukšta

Paslaptinga muzikos animacija, kurioje vaizdai iš „Google“ paieškos dinamiškai rodomi realiu laiku ir vaizdai rodomi dainų tekstais.

Hover efektai

Hover efekto ateitis ateina su CSS3. Aptakus ir perspektyvus.

Aš esu Joseph Barrett

CSS3 integruota į portfelio svetainės socialinės žiniasklaidos piktogramas. Tai ne tik įdomus, bet ir dizainerio kūrybiškumas.

Begalinis priartinimas

Sklandus animacija, taip pat puikus būdas parodyti savo portfelį. Bendras 26 vaizdų priartinimas yra 67108864: 1.

Kinect ir CSS3

“14 kūno sąnarių stebimi ir konvertuojami į trumpą CSS animaciją naudojant „Xbox Kinect“. Kūno duomenys įkeliami į naršyklę, kur yra analizuojami ir konvertuojami į CSS animacijas su animatable.com.”

Matrica

Norite būti toks kietas kaip Matrica? Su CSS3 galite tai padaryti.

Morphing kubeliai

Eksperimentinis demonstravimas CSS3 tyrimui naudojant 3D transformacijas, animacijas ir perėjimus. Įdomu, kad čia galite pasirinkti tekstą ant elementų, net jei jie vis dar sukasi.

Mūsų saulės sistema

Jums nereikia brangios atskiros programinės įrangos, kad padėtų studentams ištirti saulės sistemą.

Duff Roll

“Mmmmmm… Homeras mėgsta niekada nesibaigiantį alaus tiekimą.”

Plakato ratas

Paprastas, bet įdomus pavyzdys, rodantis, kaip naudoti CSS transformaciją ir animaciją, kad pasiektumėte įdomų efektą.

Pagarbus pavojus

Kas gali atsispirti svetainei su tikrai mielais simboliais ir linksmais animacijomis?

Rofox

Besiūlių ir įdomių animacijų, išbandykite savo pradinį kodą!

Shaun The Sheep

“Žiūrėkite „Shaun“ ir jo draugų antikinius įrašus „An Ill Wind“, „Snowed In“, „The Big Chase“ ir „Twos Company“ klipuose naudodami interaktyvų eksperimentą, sukurtą su aparatine įranga pagreitintu HTML5 vaizdo įrašu, „3D CSS Transforms“ ir „WebM“.”

Erdvė

Galbūt erdvė yra galutinė CSS3 riba.

„Space CaCSS“

Sukurkite stebuklingą efektą, kaip tai nėra sunku CSS3, nes yra daugiausia teisingi kartotinis radialinis gradientas ir fono dydis dalyvauja. Galimi variantai, kai sumaišoma pakankamai.

Žvaigždžių karų nuskaitymas

„Star Wars“ atidarymo efektas! Taip pat epas kaip CSS3.

„Expressive Web“

Išraiškingas internetas ne tik supažindina jus su CSS3 ir jo naršyklės palaikymu, nuoroda ir dokumentacija, bet ir demonstruoja CSS3 animaciją savo tinklalapyje.

Laiškų vadovai

Naudojant tipus sukurti šešėlį, kuris atrodo kaip žmogaus veidas, kuris būtų manęs, kad tai būtų įmanoma su CSS3?

Vyras iš Holivudo

Ar kada nors matėte tuos patrauklius animacinius filmus, kuriuose buvo tik gryna tipografija? Na, galite tai padaryti ir su CSS3.

Planetariumas

Paprasta epinė demo apie planetariumo tyrimą su detalėmis. Dalyvauja SVG, JavaScript, HTML5, CSS3, šriftai ir tipai.

Tipas Rains

“Šiandienos prognozė, darant prielaidą, kad naudojate modernią naršyklę, yra drumstas, su 100% tikimybe, kad Gruzijos dušai.”

Tipografijos efektai

Be mygtukų, meniu ir slinkties efektų, taip pat galite pasiekti kūrybiškų tipografijos efektų su CSS3. „JQuery“ taip pat dalyvauja šiame demonstracijoje, norėdamas parašyti žodžių raides.

Pasivaikščiojimas su Andrew Hoyer

Geriausia iš visų, jūs taip pat galite išmokti vaikščioti su Andrew Hoyer straipsniu!

Wonder Webkit

Puikus CSS3 3D transformacijų naudojimas su „JavaScript Matrix“ biblioteka. Skamba techniškai, bet rezultatas yra švelniai atvėsti.

Zoetrope

Ką dar negalite daryti su CSS3, kai su juo galima žiūrėti Zoetrope?

Atspindys

Ikvepiantis? Taip. Praktinis? Galbūt. Animacijos technika visada yra kūrėjų ir animatorių galvos braižymo tema, nes tam reikia tam tikro lygio žinių, kad būtų sukurta tikrai sklandi, unikali ir stilinga animacija. Nors CSS3 turi galimybę atlikti animaciją, tai nereiškia, kad tai tinkama priemonė animacijai. Manau, kad galų gale tai vis dar apie jūsų pageidavimus, kaip ir aš, man gerai, tiek, kiek įrankis atitinka projekto poreikius.

Kokia jūsų mintis apie šias CSS3 animacijas? Ar šios CSS3 animacijos puikiai tinka kaip eksperimentai, ar jos taip pat gali būti pritaikytos realaus gyvenimo web dizainui? Kaip įprasta, mes sveikiname jūsų vertingą mintį apie šią temą, ir leiskite mums žinoti ir savo mėgstamą CSS3 animaciją!

Daugiau

Tiesiog pademonstruokite? Jūs nusipelnėte gauti daugiau! Toliau pateikiami CSS3 vadovėliai ir vadovėliai iš Hongkiat jums, gerai praleiskite laiką juos tyrinėjant!