38 Inspiroiva CSS3-animaatiodemodeja

CSS3: n käyttöönoton jälkeen sen mahdollisuuksista ja käytettävyydestä on todella paljon kuumia keskusteluja. On kuitenkin myös monia mielenkiintoisia kokeita käsin, jotta voidaan tutkia sen mahdollisuuksia. Vaikka kokeet millään tavalla eivät osoita CSS3: n käytettävyyttä, ne osoittivat todella CSS3: n todelliset mahdollisuudet siinä määrin, että suuret kehittäjät uskovat CSS3: n olevan tulevaisuus.

Onko se totta? Tuomitse se silmäsi. Tässä näyttelyssä näytämme mitään, mutta vain 38 inspiroivat CSS3-pohjaiset animaatiodemot että selvitetään CSS3: n todellinen potentiaali. Puhtaiden kokeiden lisäksi näet myös joitakin käytännön esimerkkejä siitä, miten CSS3 voidaan soveltaa web-suunnitteluun, jotta se olisi makeampi ja seksikkäisempi.

Tarpeeksi sanoi, tutkikaa CSS3: n fantastista maailmaa!

Saatat myös olla kiinnostunut:

• Aloittelijan opas CSS3: lle
• Rocking CSS3 -hakukentän luominen
• HTML5 / CSS3-verkkosivujen rakentaminen
• Graceful Breadcrumb-navigointivalikko CSS3: ssa
• Luo Ajax-pohjainen HTML5 / CSS3-yhteyslomake
• 35 Pelkkä grafiikka CSS3: lla
• lisää…

Suosittelemme, että tarkastelet näitä demoja Google Chromen Safarin tai kehittäjän version uusimman version avulla. Useimmat demot tukevat kuitenkin Firefoxin ja Google Chromen uusinta versiota.

Animoitu 3D-helix

Luettelossa ensimmäinen on uskomaton animaatio, jonka on tehnyt Marcofolio.net, käyttäen CSS3 3D -muunnoksia. Animaatio näyttää itse taikalta, mutta voit itse oppia luomaan samanlaisen vaikutuksen artikkelin opetusohjelman kanssa!

Animoituja painikkeita

Web-suunnittelijan täytyy nähdä, koska demo ei ainoastaan ​​näytä CSS3-animaation mahdollisuuksia, vaan tarjoaa myös erittäin viileitä ja käytännöllisiä painikkeen vaikutuksia inspiraatiolle!

Animaatiovalikot

Yritetään tuoda esiin animaatiovalikot, jotta ne näyttävät todella viileiltä ja luovilta? Tämä demo on tarkoitettu sinulle.

AT-AT Walker

Innoittava animaatioesitys, jossa näkyy CSS3: n potentiaali animoida yksikkö kehon osilla.

Battlefield CSS3

Battlefield CSS3, jossa on paljon räjähdyksiä ja laukauksia!

Iso juttu

Se on sileä ja mukava animaatio, joka teki tästä demosta suuren juttuja.

Voiko Haz Ur Cursor?

“Hei, olen Cursor Monster. Minulla on sinulle viesti: 'Älä käytä osoitin: none, paitsi jos luot kursorin, joka syö hirviötä ”.”

CSS-telakka

Seksikäs kokeilu, joka jäljittelee Mac OS X: n telakkaa, ja se on todella sileä.

CSS3 Mies

Varo, tässä tulee CSS3-mies! Täydellinen esimerkki CSS3-animaation todellisen potentiaalin esittelystä.

Dribbble Ball Bouncing

Pienellä graafisten temppuja käytettäessä on mukava ja hauska CSS3-animaatio.

Dulla

Dulla näyttää melko paljon yleisimpiä tekniikoita, joita käytetään 2D-tasohyppelypelin luomiseen, mikä on nyt mahdollista myös CSS3: n kanssa.

Kehys kehyksen animaation avulla

Kehys kehyksen mukaan animaatio CSS3: lla? Ei ongelmaa!

Graafi-animaatio

Yksinkertainen mutta tehokas animaatio, jonka avulla voit näyttää / selittää sivustosi kuvaajan, oppia tekemään sen!

Korkea

Salaperäinen musiikkianimaatio, joka näyttää Google-haun kuvia dynaamisesti reaaliajassa, ja näyttävät kuvat perustuvat kappaleiden teksteihin.

Hover Effects

Hover-vaikutuksen tulevaisuus tulee CSS3: n mukana. Tyylikäs ja lupaava.

Olen Joseph Barrett

CSS3 on integroitu portfolio-sivuston sosiaalisen median kuvakkeisiin. Se ei ole vain hauskaa vaan myös suunnittelijan luovuutta.

Ääretön zoom

Tasainen animaatio, myös mukava tapa näyttää salkun. 26 kuvan koko zoomaus on 67108864: 1.

Kinect ja CSS3

“14 runkoliitosta seurataan ja muunnetaan lyhyeksi CSS-animaatioksi käyttämällä Xbox Kinectiä. Kehon tiedot tuodaan selaimeen, jossa jäsennetään ja muunnetaan CSS-animaatioita animatable.comin avulla.”

Matriisi

Haluatko olla yhtä viileä kuin Matrix? CSS3: n avulla voit tehdä sen.

Morphingin kuutiot

Kokeellinen demo, jossa tutkitaan CSS3: ta 3D-muunnosten, animaatioiden ja siirtymien avulla. Mielenkiintoinen osa tässä on, että voit silti valita elementteihin liittyvän tekstin, vaikka ne vielä pyörivät.

Meidän aurinkokuntamme

Sinun ei tarvitse kalliita itsenäisiä ohjelmia, joiden avulla opiskelijat voivat selvittää aurinkokuntia.

Duff Roll

“Mmmmmm… Homer rakastaa loputtoman oluen tarjontaa.”

Juliste ympyrä

Yksinkertainen mutta mielenkiintoinen esimerkki siitä, miten CSS-muunnosta ja animaatiota käytetään mielenkiintoisen vaikutuksen saavuttamiseksi.

Reverend Danger

Kuka voi vastustaa verkkosivustoa, jossa on todella söpöjä merkkejä ja hauskoja animaatioita?

Rofox

Saumaton ja hauska animaatio, saat lähdekoodin kokeilemaan omaa!

Shaun The Sheep

“Katso Shaunin ja hänen ystäviensä antikoita "An Ill Wind", "Snowed In", "The Big Chase" ja "Twos Company" -leikkeissä interaktiivisella kokeilulla, joka on luotu laitteistokiihdytetyllä HTML5-videolla, 3D CSS-muunnoksilla ja WebM: llä.”

tila

Ehkä tilaa on CSS3: n viimeinen raja.

Space CaCSS

Luo maaginen vaikutus, kuten tämä ei ole kovin vaikeaa CSS3: n kanssa, koska on olemassa pääasiassa vain toistamalla-säteittäinen kaltevuus ja tausta-koko mukana. Vaihtelut ovat mahdollisia kohtuullisella määrällä tweaksia.

Star Wars indeksoi

Star Warsin avaus indeksoi! Aivan yhtä eeppinen kuin CSS3.

Expressive Web

Ilmeikäs web ei pelkästään esittele CSS3: n ja sen selaimen tukea, viittausta ja dokumentaatiota, vaan myös esittelee mielenkiintoista CSS3-animaatiota verkkosivuillaan.

Kirjaimet

Tyyppien luominen luomaan varjo, joka näyttää ihmisen kasvolta, joka olisi ajatellut, että se olisi mahdollista CSS3: n kanssa?

Mies Hollywoodista

Oletko koskaan nähnyt niitä houkuttelevia animaatioita, jotka käyttivät vain puhdasta typografiaa? No, voit tehdä sen myös CSS3: n kanssa.

Planetaario

Yksinkertaisesti eeppinen demo planeetan tutkimisesta. SVG, JavaScript, HTML5, CSS3, fontit ja tyypit ovat mukana.

Tyyppi Rains

“Tänään ennustetaan, että olet käyttänyt modernia selainta, on pilvinen, ja Georgian suihkut ovat 100%.”

Typografian vaikutukset

Painikkeen, valikon ja hover-efektin lisäksi voit myös luoda luovia typografisia vaikutuksia CSS3: lla. jQuery on mukana myös tässä demossa, jotta se muotoilee sanojen kirjaimia.

Kävely Andrew Hoyerin kanssa

Mikä parasta, voit myös oppia kävelemään Andrew Hoyerin kanssa artikkelissa!

Wonder Webkit

CSS3 3D -muunnosten upea käyttö JavaScript Matrix -kirjastolla. Kuulostaa tekniseltä, mutta tulos on hiukan viileä.

zoetrope

Mitä muuta et voi tehdä CSS3: n kanssa, kun Zoetrope on mahdollista sen kanssa?

Heijastus

Innostava? Joo. Käytännöllinen? Ehkä. Animaatiotekniikka on aina kehittäjän ja animaattorin pään naarmuuntuva aihe, koska se vaatii tiettyä tietotasoa tuottamaan todella tasaista, ainutlaatuista ja tyylikästä animaatiota. Vaikka CSS3: lla on mahdollisuus tehdä animaatio, se ei tarkoita, että se olisi sopiva työkalu animaatioon. Luulen, että lopulta se on edelleen sinun mieltymyksestäsi, sillä minulla on kunnia molempien kanssa, kunhan työkalu sopii projektin tarpeisiin.

Mitä mieltä olet näistä CSS3-animaatioista? Ovatko nämä CSS3-animaatiot vain kokeina, tai niitä voidaan soveltaa myös todelliseen web-suunnitteluun? Kuten tavallista, olemme tyytyväisiä arvokkaaseen ajatukseen aiheesta, ja kerro meille myös suosikkikappaleesi CSS3-animaatiosta!

Lisää

Vain esitellä, todella? Olet ansainnut saada lisää! Alla on Hongkiatin CSS3: n opetusohjelmat ja oppaat sinulle, sinulla on mukava aika tutkia niitä!