38 Inspireeriv CSS3 animatsiooniesitlused

Pärast CSS3 kasutuselevõttu on selle võimaluste ja kasutatavuse ümber väga palju kuumad arutelud. Siiski on ka palju huvitavaid eksperimente, mis on käsitsi valmistatud selle potentsiaali uurimiseks. Kuigi katsed mis tahes viisil ei tõenda CSS3 kasutatavust, näitasid nad tõesti CSS3 tegelikke võimalusi, nii et suured arendajad usuvad, et CSS3 on tulevik.

Kas see on tõsi? Kohtunik seda oma silmadega. Selles näituses ei näita me midagi muud kui lihtsalt 38 inspireeriv CSS3-põhine animatsiooniteos mis avastavad puhtalt CSS3 tegeliku potentsiaali. Lisaks puhtatele katsetele näete ka mõningaid praktilisi näiteid selle kohta, kuidas CSS3 saab veebidisaini rakendada, et muuta see magusamaks ja seksikamaks.

Aitab öelda, uurime CSS3 fantastilist maailma!

Samuti võite olla huvitatud:

CSS3 algaja juhend
Kiik CSS3 otsingukasti loomine
HTML5 / CSS3 veebilehtede loomine
Graceful Breadcrumb Navigation Menu CSS3-s
Loo Ajax-põhine HTML5 / CSS3 kontaktvorm
35 CSS3 abil ehitatud graafika
veel…

Soovitatav on vaadata neid demosid Google Chrome'i Safari või Arendaja versiooni uusima versiooni abil. Enamik demosid toetavad siiski Firefoxi ja Google Chrome'i viimast versiooni.

Animeeritud 3D Helix

Esimene loendis on uskumatu animatsioon, mille on teinud Marcofolio.net, kasutades CSS3 3D muundusi. Animatsioon näeb välja nagu maagia ise, kuid te saate tegelikult õppida samasuguse efekti loomist artikli juhendajaga!

Animeeritud nupud

Veebidisainer on must-see, sest demo näitab mitte ainult CSS3 animatsiooni võimalusi, vaid pakub ka väga lahedaid ja praktilisi nupuvõimalusi inspiratsiooniks!

Animatsiooni menüüd

Proovite oma animatsioonimenüüid vürtsika ja loomingulise väljanägemise järele? See demo on teie jaoks.

AT-AT Walker

Inspireeriv animatsiooniteos demonstreerib CSS3 potentsiaali kehaosadega üksuse animeerimisel.

Battlefield CSS3

Battlefield CSS3, millel on palju plahvatusi ja lööke!

Suur asi

See on sujuv ja kena animatsioon, mis tegi selle demo suureks.

Kas Haz Ur kursor?

“Tere, ma olen kursorite koletis. Minu papa on teile sõnum: 'Palun, ära kasuta kursor: pole, välja arvatud juhul, kui loote kursorit, mis sööb koletist.”

CSS dokk

Seksikas katse, mis jäljendab Mac OS X'i dokki ja on tõesti sile.

CSS3 Mees

Vaadake, siin tuleb CSS3 mees! Ideaalne näide CSS3 animatsiooni tegelikust potentsiaalist.

Dribbble Ball Bouncing

Väike graafiliste trikkide kasutamisega kaasneb kena ja lõbusa CSS3 animatsioon.

Dulla

Dulla näitab päris palju kõige tavalisemaid meetodeid, mida kasutatakse 2D platvormi mängude loomiseks, mis on nüüd võimalik ka CSS3-ga.

Frame by Frame Animatsioon

Kaaderkaadri animatsioon CSS3-ga? Pole probleemi!

Graafi animatsioon

Lihtne, kuid võimas animatsioon saidi graafiku näitamiseks / selgitamiseks, õppida seda tegema!

Kõrge

Saladuslik muusika animatsioon, mis kuvab Google'i otsingu kujutisi reaalajas dünaamiliselt ja kuvatavate piltide aluseks on laulusõnad.

Hoverefektid

Hover-efekti tulevik tuleb CSS3-ga. Läikiv ja paljutõotav.

Ma olen Joseph Barrett

CSS3 integreeriti portfelli saidi sotsiaalmeedia ikoonidesse. See ei ole ainult lõbus, vaid näitab ka disaineri loovust.

Lõpmatu suum

Sujuv animatsioon, samuti kena viis oma portfelli näitamiseks. 26 kujutise suum on 67108864: 1.

Kinect ja CSS3

“14 kehaliigendit jälgitakse ja konverteeritakse lühikesteks CSS-animatsioonideks Xbox Kinecti abil. Kehaandmed viiakse brauserisse, kus on analüüsitud ja teisendatud CSS-animatsiooniks animatable.com-iga.”

Maatriks

Tahad olla nii lahe kui maatriks? CSS3 abil saate seda teha.

Morphingi kuubikud

Eksperimentaalne demo, mis uurib CSS3, kasutades 3D muundusi, animatsioone ja üleminekuid. Huvitav osa siin on, et saate ikka valida elemente sisaldava teksti isegi siis, kui nad ikka veel pöörlevad.

Meie Päikesesüsteem

Sa ei vaja kallis iseseisvat tarkvara, et aidata õpilastel päikeseenergia süsteemi enam uurida.

Duff Roll

“Mmmmmm ... Homer armastaks õlle lõpmatut tarnimist.”

Plakatite ring

Lihtne, kuid huvitav näide, kuidas näidata teile, kuidas kasutada CSS-i transformatsiooni ja animatsiooni huvitava efekti saavutamiseks.

Reverend Danger

Kes suudab vastu panna veebilehe, millel on tõesti armas tähemärki ja lõbusaid animatsioone?

Rofox

Õmblusteta ja lõbus animatsioon, saad lähtekoodi ise proovida!

Shaun The Sheep

“Vaadake Shauni ja tema sõprade väljamõeldud pilte "Ebapiisav tuul", "Luminud", "Suur Chase" ja "Twos Company" kaudu interaktiivse katse abil, mis on loodud riistvaralise kiirendatud HTML5 video, 3D CSS teisenduste ja WebM abil.”

Kosmos

Võib-olla on ruum CSS3 jaoks lõplik piir.

Space CaCSS

Loo maagiline efekt, nagu see ei ole CSS3-ga tõesti raske, kuna on peamiselt õiglane korduv-radiaal-gradient ja tausta suurus kaasatud. Variatsioonid on võimalikud mõistliku hulga tweaks'idega.

Star Wars Crawl

Star Wars'i avamise indekseerimise efekt! Just nii eepiline kui CSS3.

Expressive Web

Ekspressiivne veebisait mitte ainult ei tutvusta teile CSS3 ja selle brauseri tuge, viiteid ja dokumente, vaid tutvustab ka oma veebilehe CSS3 animatsiooni..

Kirjade pead

Kasutades tüüpe, et luua vari, mis näeb välja inimese nägu, kes oleks arvanud, et see oleks võimalik CSS3-ga?

Mees Hollywoodist

Kas olete kunagi näinud neid atraktiivseid animatsioone, mis kasutasid ainult puhta tüpograafia? Noh, saate seda teha ka CSS3-ga.

Planetaarium

Lihtsalt eepiline demo planetaariumiga tutvumise kohta. Kaasatud on SVG, JavaScript, HTML5, CSS3, fondid ja tüübid.

Tüüp Rains

“Tänapäeva prognoos, eeldades, et kasutate kaasaegset brauserit, on hägune, 100% tõenäosusega Gruusia duššidele.”

Tüpograafiaefektid

Lisaks nupule, menüüle ja hoverefektidele saate CSS3 abil saavutada ka loomingulisi tüpograafilisi efekte. JQuery osaleb ka selles demos, et kujundada sõnade tähed.

Andrew Hoyeriga kõndimine

Mis kõige parem, võite õppida ka Andrew Hoyeriga kõndima!

Wonder Webkit

Suurepärane kasutamine CSS3 3D teisenduste tegemiseks JavaScript Matrixi raamatukoguga. Tundub tehniliselt, kuid tulemus on hämmastavalt lahe.

Zoetrope

Mida veel ei saa CSS3-ga teha, kui Zoetrope on sellega võimalik?

Peegeldus

Inspireeriv? Jah. Praktiline? Võib-olla. Animatsioonitehnika on alati arendaja ja animaatori pearaapitav teema, sest see nõuab teatud tasemel teadmisi, et toota tõeliselt sujuvat, unikaalset ja stiilset animatsiooni. Kuigi CSS3-l on võimalus animatsiooni teha, ei tähenda see, et see on animatsiooni jaoks sobiv vahend. Ma arvan, et lõpuks on see ikka teie eelistustest, nii nagu mina, ma olen mõlemaga nii hea, kui tööriist sobib projekti vajadustele.

Milline on teie mõte nendest CSS3 animatsioonidest? Kas need CSS3 animatsioonid on head ainult eksperimentidena või neid saab rakendada ka reaalses veebidisainis? Nagu tavaliselt, tervitame teie väärtuslikku mõtlemist teemal ja andke meile teada ka oma lemmik CSS3 animatsiooni!

Veel

Lihtsalt näidake, tõesti? Sa teenisid rohkem! Allpool on Hongkiatilt CSS3 õpetused ja juhendid teile, neil on kena aeg neid uurida!