24 legjobb CSS3 animációs bemutató és oktatóanyag

Ma egy olyan bejegyzést mutatunk be a CSS3 animáción, amely a legjobb és legcsodálatosabb funkciókat tartalmazza. A CSS3 tele van olyan csodálatos funkciókkal, amelyeket kihasználhat, és amelyekről talán nem is tud. Ezért áttekintünk néhány olyan CSS3 funkciót, amelyek kevésbé feltártak. Az egyik legcsodálatosabb funkciója a CSS3 Animation, amely szórakoztató és kiváló hatást kelt. Mindezek az oktatóanyagok nagyon hasznosak, és néhányuk akár Javascript alternatívaként is használható. Nézze meg ezeket az animációkat, hogy inspirációt merítsen saját projektjéhez. Imádni fogod, amit mutatnunk kell neked!

Az alábbi CSS3 animációs effektusok némelyike ​​nem látható az Ön számára, ha Firefox böngészőt használ. Ebben az esetben le kell töltenie egy alternatív böngészőt a listánk teljes megtekintéséhez. Személy szerint azt javasoljuk, hogy használja a Google Chrome -ot, mivel ez a Firefox egyik legjobb alternatívája. Ettől eltekintve használhatja a Safarit vagy akár az Internet Explorert. A választás teljesen rajtad múlik. Keresse meg az Ön preferenciáinak megfelelő böngészőt.

Ennek ellenére reméljük, hogy tetszeni fog a listánk  24 legjobb CSS3 animációs bemutató és oktatóanyag.

A közösségi ikonok megjelenítése gyönyörű módon a CSS3 használatával

A példa minden -webkit alapú böngészővel (Safari és Chrome) működik, de Firefox 4 -ben is. Azt is láthatja, hogyan érhető el ugyanez a hatás a CSS és a jQuery használatával.

A közösségi ikonok megjelenítése gyönyörű módon a CSS3 használatával

További információ A közösségi ikonok gyönyörű megjelenítése a CSS3 használatával

3D animáció tiszta CSS3 használatával

A perspektivikus tulajdonság az, amire szükségünk van a 3D -s hatás létrehozásához. A transzformáció és az átmenet segítségével 3D animációt készíthetünk tiszta CSS3 használatával.

3D animáció tiszta CSS3 használatával

További információ a 3D animációról tiszta CSS3 használatával

Színes óra

Készítsen színes jQuery -t & CSS óra, amely segít nyomon követni az év értékes utolsó másodperceit.

Színes óra

További információ a színes óráról

Színes minősítési rendszer CSS3 -mal

Egy viszonylag egyszerű jQuery bemutatót fogunk csinálni. A minősítési rendszereket gyakran használják a webhelyeken, például annak értékelésére, hogy egy adott termék, cikk vagy megjegyzés mennyire jó. Kicsit javítani akartam ezen ötleten, vizuálisan vonzóbbá téve azt.

Színes minősítési rendszer CSS3 -mal

További információ a színes értékelési rendszerről a CSS3 segítségével

Dinamikus PNG árnyékpozíció & átlátszatlanság

A világítás bekapcsolásakor a logó árnyékának helyzete és opacitása dinamikusan változik, az izzó helyzetétől és távolságától függően. Ne felejtse el húzni a logót és/vagy az izzót!

Dinamikus PNG árnyékpozíció & amp; átlátszatlanság

További információ a dinamikus PNG árnyékpozícióról & átlátszatlanság

jQuery DJ hős

A CSS3 és a jQuery kombinálásával két rekordot hoztam létre, amelyekkel elkezdheti forgatni (gyorsabban és lassabban), és még a karcolás is engedélyezve van. Egy jövőbeli verzióban ezt valódi hanggal együtt lehet használni (ennek a verziónak nincs hangja).

jQuery DJ hős

További információ a jQuery DJ Hero -ról

Bokeh effektusok a CSS3 és a jQuery segítségével

Ez az oktatóanyag megtanítja, hogyan lehet újra létrehozni a bokeh-effektust a CSS 3 segítségével. A jQuery némi segítségével véletlenszerű színt, méretet és pozíciót adhatunk hozzá a hatáshoz.

Bokeh effektusok a CSS3 és a jQuery segítségével

További információ a Bokeh effektekről a CSS3 és a jQuery segítségével

A tér a végső korlát, igaz?

Függetlenül attól, hogy milyen gyorsak az internetcsövek vagy a kiszolgálók, mindig szükségünk lesz spinner -ekre, amelyek jelzik, hogy valami történik a színfalak mögött. Eddig az emberek elmentek valamelyik webhelyre, kiválasztották a rendelkezésre álló sablonok egyikét, személyre szabták előtér- és háttérszíneiket, és letöltöttek egy gyönyörű GIF -képet.

a tér a végső korlát, nem?

Bővebben a térről a végső korlát, igaz?

Szexi függőleges csúszópanel létrehozása a jQuery és a CSS3 használatával

Tehát mi a helyzet egy függőleges csúszópanellel, amely valamilyen fiókként működik a szokásos felső vízszintes csúszópanel helyett, amely kinyitva lenyom minden mást? Miközben a szokásos vízszintes panelek alternatíváin gondolkodtam, arra gondoltam, hogy jó lenne valami hasonlót létrehozni, de ez egy kicsit rugalmasabb.

Szexi függőleges csúszópanel létrehozása a jQuery és a CSS3 használatával

További információ a szexi függőleges csúszópanel létrehozásáról a jQuery és a CSS3 használatával

Képkockánként animáció

Az első bemutató megköveteli, hogy folytassa a képre való kattintást a következő kép megtekintéséhez, és az utolsó képkocka elérésekor az elejére tekeredik. A második bemutatónak csak annyit kell tennie, hogy az egeret a kép fölött mozgatja a legtöbb böngészőben. Ennek a módszernek a nagy hátránya azonban az, hogy az egér mozgási sebessége szabályozza az animáció sebességét

Képkockánként animáció

Bővebben a képkockánkénti animációról

CSS3 analóg óra

Analóg óra a webkit átmenet és a CSS átalakítása segítségével. A JavaScript csak az aktuális idő behúzására szolgál.

CSS3 analóg óra

További információ a CSS3 analóg óráról

Spotlight Cast Shadow

Vigye a kurzort a doboz fölé, hogy árnyékot vetjen a reflektorfényben. Ez a demó a CSS text-shadow tulajdonságot használja, amelyet a Safari, a Firefox 3.5, az Opera és a Chrome támogat.

Spotlight Cast Shadow

ABC

További információ a Spotlight Cast Shadow -ról

Csúsztatható vinyl CSS3 -mal

Vegyünk egy szabványos lemezborítót, egy kis HTML -t, valamint néhány CSS3 átmenetet és átalakítást, hogy csúszó vinil -effektusokat hozzunk létre a kedvenc zenék bemutatásához.

Csúsztatható vinyl CSS3 -mal

További információ a csúszó vinilről a CSS319 segítségével

Csodálatos Image Hover effektek a Webkit és a CSS használatával

területeken

Csodálatos Image Hover effektek a Webkit és a CSS használatával

További információ az Amazing Image Hover Effects Webkit és CSS használatával

A CSS3 használatával hozzon létre dinamikus halom indexkártyát

Létrehozunk egy dinamikus halom indexkártyát kizárólag HTML és CSS3 segítségével, és olyan CSS3 funkciókat használunk, mint az átalakítás és az átmenet (a dinamikus hatásokhoz), valamint a @font-face, box-shadow és border-sugar (a stílushoz).

A CSS3 használatával hozzon létre dinamikus halom indexkártyát

Bővebben a CSS3 használatával dinamikus verem indexkártyát hozhat létre

Félelmetes fedvények a CSS3 segítségével

A trükk ezekkel a fedvényekkel a színátmenet szegélye, amely felülről lefelé haladva világosabb és sötétebb narancssárga lesz. Ennek a hatásnak a létrehozásához a border-image tulajdonságot használtuk, ami egy trükkös kis kiegészítés a CSS-hez.

Félelmetes fedvények a CSS3 segítségével

További információ a CSS3 félelmetes fedvényeiről

Going Nuts with CSS Transitions

A szerző megmutatja, hogy a CSS 3 transzformációk és a WebKit -átmenetek hogyan adhatnak hozzá a képek megjelenítéséhez a webhelyén.

Going Nuts with CSS Transitions

További információ a Going Nuts CSS Transitions -ről

CSS3 animációk és jQuery megfelelőik

Ez az oktatóanyag/ezek a példák ugyanazon HTML használatát mutatják be, különböző osztályokkal a CSS3 és a jQuery számára. Összehasonlíthatja mindkét kódot, és megnézheti, melyik tetszik jobban. Ne felejtse el ellenőrizni a bemutatót/letölteni a forráskódot, hogy megnézze, hogyan működik minden a motorháztető alatt.

CSS3 animációk és jQuery megfelelőik

További információ a CSS3 animációkról és azok jQuery megfelelőiről

Havas CSS3 animáció

Hideg és havas van itt Brightonban, így a lehulló fehér cuccok megünneplésére (és persze a különböző ünnepségekre ebben az évszakban) A Clearleft saját Natbatja meglepett egy havas CSS3 animációs meglepetést mindenkinek, Safari és Chrome felhasználók odakint.

Havas CSS3 animáció

További információ a Havas CSS3 animációról

További információ a 3D CSS transzformációkról

Különféle 3D CSS átalakítások áttekintésben.

További információ a 3D CSS transzformációkról

További információ a 3D CSS transzformációkról

CSS3 óra jQuery -vel

Old School Clock CSS3 -mal és jQuery -vel.

CSS3 óra jQuery -vel

További információ a CSS3 óráról a jQuery segítségével

Az OS X dokkoló újratelepítése

Összegyűjtjük a hivatkozások alapvető listáját, és félelmetes OS X -dokkolóvá alakítjuk őket.

Az OS X dokkoló újratelepítése

További információ az OS X dokkoló helyreállításáról

Coverflow effektus CSS transzformációkkal és jQuery UI -val

Ez a koncepció-bizonyítás fedőfolyamat-hatást mutat a Webkit új CSS-transzformációs funkciójával (a Safari 3.1-ben). Mondanom sem kell, hogy ezen a ponton más böngészőkben nem fog futni (azonban a vászonra való adaptálása meglehetősen egyszerűnek kell lennie, és még most sem törik meg más böngészőkben).

Coverflow effektus CSS transzformációkkal és jQuery UI -val

További információ a Coverflow effektusról, amely CSS -transzformációkat és jQuery felhasználói felületet tartalmaz

Rugalmas indexkép menü

Folyamatos kísérletben, hogy alternatív módszereket kínáljon a menük összeállításához, a szerző összeállított egy rugalmas miniatűr menüt.

Rugalmas indexkép menü

További információ a rugalmas indexkép menüről

Nagyon jó effektek ezek, mi? Fogadok, hogy fogalma sem volt arról, hogy a CSS3 ilyen erős programozási nyelv. Nos, most te! Most ezeknek az oktatóanyagoknak a segítségével létrehozhat saját animációkat a CSS3 -ban. Pontosan követheti ezeket az oktatóanyagokat, amíg meg nem érti a nyelvet, majd elkezdheti dolgozni saját egyedi animációin.