38 Inspiráló CSS3 animációs demók
A CSS3 bevezetése óta valóban rengeteg forró vitát folytatnak annak lehetőségeiről és használhatóságáról. Ugyanakkor rengeteg érdekes kísérlet létezik, amellyel kézzelfogható, hogy felfedezzék annak lehetőségeit. Bár a kísérletek bármilyen módon nem bizonyítják a CSS3 használhatóságát, valóban megmutatták a CSS3 igazi lehetőségeit, olyan mértékben, hogy a nagy fejlesztők úgy vélik, hogy a CSS3 a jövő.
Igaz ez? Bírálja meg a szemét. Ebben a bemutatóban semmit nem fogunk mutatni, csak igaz 38 inspiráló CSS3 alapú animációs demók amely tisztán felfedezi a CSS3 valódi potenciálját. A tiszta kísérletek mellett néhány gyakorlati példát is láthatunk arról, hogyan lehet a CSS3-t alkalmazni a webdesignban, hogy édesebb és szexibb legyen.
Elég azt mondta, vizsgáljuk meg a CSS3 fantasztikus világát!
Ön is érdekelhet:
- Kezdő útmutató a CSS3-hoz
- A Rocking CSS3 keresőmező létrehozása
- HTML5 / CSS3 weboldalak építése
- Kecses Breadcrumb navigációs menü a CSS3-ban
- Hozzon létre egy Ajax-alapú HTML5 / CSS3 kapcsolati űrlapot
- 35 CSS3-val épített grafika
- több…
Erősen ajánlott, hogy ezeket a bemutatókat a Google Chrome Safari vagy fejlesztői verziójának legújabb verziójával nézze meg. A legtöbb demó azonban támogatja a Firefox és a Google Chrome legújabb verzióját.
Animált 3D Helix
Az első a listában egy hihetetlen animáció, amelyet Marcofolio.net készített a CSS3 3D átalakítások használatával. Az animáció maga mágiának tűnik, de valójában megtanulhatja, hogy hasonló cikket hozzon létre a cikkben található bemutatóval!
Animált gombok
A webdesigner számára elengedhetetlen, hiszen a demó nemcsak a CSS3 animáció lehetőségeit mutatja be, hanem nagyon hűvös és praktikus gombhatásokat is nyújt inspirációnak!
Animációs menük
Az animációs menük kipróbálása, hogy azok valóban hűvösek és kreatívak legyenek? Ez a demó az Ön számára.
AT-AT Walker
Inspiráló animációs bemutató, amely bemutatja a CSS3 potenciálját a testrészekkel egy egység animálására.
Csatatér CSS3
Battlefield CSS3 sok robbanással és lövéssel!
Nagy ügy
Ez a sima és kedves animáció, ami ezt a demót nagyszerűvé tette.
Lehet Haz Ur kurzor?
“Szia, én vagyok a kurzor szörny. A papámnak van egy üzenete az Ön számára: „Kérem, ne használja kurzor: none, kivéve, ha kurzort eszik szörnyet eszik.”
CSS dokkoló
Szexi kísérlet, amely a Mac OS X dokkját utánozza, és ez igazán sima.
CSS3 ember
Figyelj, itt jön a CSS3 ember! Tökéletes példa a CSS3 animáció valódi potenciáljának bemutatására.
Dribbble Ball Bouncing
A grafikus trükkök kicsi felhasználásával szép és szórakoztató CSS3 animáció jön létre.
Dulla
Dulla nagyjából megmutatja az egyik leggyakoribb technikát a 2D platformer játék létrehozásához, ami most már a CSS3-tal is lehetséges.
Keret animációval
Képkocka animáció a CSS3-al? Nem probléma!
Grafikon animáció
Egy egyszerű, de erőteljes animáció, amely megmutatja / magyarázza a webhely grafikonját, megtanulhatja, hogyan készítheti el!
Magas
Titokzatos zenei animáció, amely dinamikusan jeleníti meg a Google Search képeit valós időben, és a megjelenítő képek a dalszövegeken alapulnak.
Hover effektek
A lebegő hatás jövője a CSS3-mal érkezik. Elegáns és ígéretes.
Joseph Barrett vagyok
A CSS3 integrálódott a portálhely szociális média ikonjaiba. Ez nem csak szórakoztató, hanem a tervező kreativitását is mutatja.
Végtelen zoom
Sima animáció, és egy szép módja annak, hogy bemutassa portfólióját. A 26 kép teljes zoomja 67108864: 1.
Kinect és CSS3
“14 testhézagot nyomon követnek és rövid CSS animációvá alakítanak Xbox Kinect segítségével. A testadatok a böngészőbe kerülnek, ahol az elemzés és a CSS-animációk animatable.com-val történő átalakítása történik.”
Mátrix
Szeretné, hogy olyan hideg legyen, mint a Matrix? A CSS3 segítségével képes vagy.
Morphing kocka
Kísérleti bemutató a CSS3 feltárására 3D átalakítások, animációk és átmenetek használatával. Az érdekes rész itt az, hogy még mindig kiválaszthatja a szöveget az elemeken, még akkor is, ha még mindig forognak.
Naprendszerünk
Nincs szükség drága önálló szoftverre, hogy segítse a diákokat a naprendszer felfedezésében.
Duff Roll
“Mmmmmm… .Homer szeretne a soha véget nem érő sör ellátásra.”
Poszter kör
Egy egyszerű, de érdekes példa arra, hogy megmutassuk, hogyan kell a CSS átalakítását és animációját használni érdekes hatás eléréséhez.
Tiszteletes veszély
Ki tudja ellenállni egy olyan weboldalnak, amely igazán aranyos karaktereket és szórakoztató animációkat tartalmaz?
Rofox
Zökkenőmentes és szórakoztató animáció, hogy a forráskódot kipróbálhassa!
Shaun a bárány
“Nézze meg Shaun-t és barátai hangulatát az "An Ill Wind", a "Snowed In", a "The Big Chase" és a "Twos Company" klipjeiben egy interaktív kísérlet segítségével, amelyet hardveres gyorsítású HTML5 videó, 3D CSS átalakítások és WebM.”
Tér
Talán a hely a CSS3 végső határértéke.
Space CaCSS
Hozzon létre mágikus hatást, mint ez nem igazán nehéz a CSS3-val, mivel főleg csak igaz ismétlődő-sugaras-gradiens és background-size részt. A változatok ésszerű mennyiségű csípéssel lehetségesek.
Csillagok háborúinak feltérképezése
Csillagok háborúja nyitó hatása! Ugyanolyan epikus, mint a CSS3.
Az Expresszív Web
A kifejező web nemcsak a CSS3-ról és a böngésző támogatásáról, referenciájáról és dokumentációjáról beszél, hanem a CSS3 animációját is bemutatja a weboldalán..
A levélfejek
A típusok segítségével olyan árnyékot hozhat létre, amely úgy néz ki, mint az emberi arc, aki azt gondolta volna, hogy lehetséges a CSS3-val?
A férfi Hollywoodból
Valaha láttam azokat a vonzó animációkat, amelyek csak tiszta tipográfiát alkalmaztak? Nos, megteheti a CSS3-mal is.
A Planetárium
Egyszerűen epikus bemutató a planetárium felfedezésével. Az SVG, a JavaScript, a HTML5, a CSS3, a betűtípusok és a típusok is részt vesznek.
Rains típus
“A mai előrejelzés, feltételezve, hogy egy modern böngészőt használ, felhős, 100% esélye van a Georgia zuhanyzóknak.”
Tipográfiai hatások
A gombok, a menü és a lebegő hatások mellett kreatív tipográfiai hatást érhet el a CSS3 segítségével. A jQuery is részt vesz ebben a demóban a szavak betűinek stílusára.
Séta Andrew Hoyerrel
A legjobb az egészben, hogy megtanulhatsz járni Andrew Hoyerrel a cikkben!
Wonder Webkit
A CSS3 3D átalakítások csodálatos használata JavaScript Matrix könyvtárral. Technikailag hangzik, de az eredmény ragyogóan hűvös.
Zoetrope
Mi mást nem tehetsz a CSS3-val, amikor Zoetrope is lehetséges vele?
Visszaverődés
Inspiráló? Igen. Gyakorlati? Talán. Az animáció technikája mindig fej-karcoló téma a fejlesztőnek és az animátornak, mivel bizonyos szintű ismereteket igényel, hogy igazán sima, egyedi és stílusos animációt készítsen. Míg a CSS3-nak lehetősége van az animációra, ez nem jelenti azt, hogy ez az animáció megfelelő eszköze. Azt hiszem, végül még mindig a te preferenciáidról szól, mint én, mindketten rendben vagyok, mindaddig, amíg az eszköz megfelel a projekt igényeinek.
Mit gondolsz ezekről a CSS3 animációkról? Ezek a CSS3 animációk csak kísérletként szolgálnak, vagy a valós webes tervezésbe is alkalmazhatók? Szokásos módon üdvözöljük a témával kapcsolatos értékes gondolkodást, és ismerjük meg kedvenc CSS3 animációját is!
Több
Csak mutasd be, tényleg? Megérdemelted, hogy többet kapj! Az alábbiakban bemutatjuk a Hongkiat CSS3 bemutatóit és útmutatásait az Ön számára, kellemes időt tölthet nekik!
