38 Inspirující ukázky animace CSS3

Od zavedení CSS3 se opravdu objevuje spousta debat o jeho možnostech a použitelnosti. Existuje však také mnoho zajímavých experimentů, které jsou vytvořeny tak, aby prozkoumaly jeho potenciál. Ačkoli experimenty v jakémkoliv smyslu neprokazují použitelnost CSS3, skutečně ukázaly skutečné možnosti CSS3, do té míry, že hlavní vývojáři věří, že CSS3 je budoucnost.

Je to pravda? Posuďte to očima. V této přehlídce nebudeme ukazovat nic jiného než jen 38 inspirující ukázky animace založené na CSS3 , které čistě objevují skutečný potenciál CSS3. Kromě čistých experimentů uvidíte také několik praktických příkladů, jak lze CSS3 aplikovat do webového designu tak, aby byl sladší a sexy.

Dost říkal, prozkoumejme fantastický svět CSS3!

Také by vás mohlo zajímat:

Průvodce pro začátečníky k CSS3
Vytvoření vyhledávacího pole CSS3
Vytváření webových stránek HTML5 / CSS3
Graceful Breadcrumb Navigační menu v CSS3
Vytvořte Ajax-založené HTML5 / CSS3 kontaktní formulář
35 Grafika postavená čistě s CSS3
více…

Důrazně doporučujeme tyto ukázky zobrazit pomocí nejnovější verze prohlížeče Google Chrome ve verzi Safari nebo Developer. Většina dema však podporuje nejnovější verzi Firefoxu a Google Chrome.

Animovaná 3D šroubovice

První v seznamu je neuvěřitelná animace vytvořená Marcofolio.net, pomocí CSS3 3D transformací. Animace vypadá jako kouzlo samo o sobě, ale ve skutečnosti se můžete naučit vytvořit podobný efekt s tutoriálem v článku!

Animovaná tlačítka

Nutno vidět pro web designer, jak demo nejen ukazuje možnosti CSS3 animace, ale také poskytuje velmi cool a praktické efekty tlačítek pro inspiraci!

Animační menu

Snažíte se okorenit nabídky animace, aby vypadaly opravdu cool a kreativní? Toto demo je pro vás.

AT-AT Walker

Inspirující demo animace, které ukazuje potenciál CSS3 na animaci jednotky s těly.

Battlefield CSS3

Battlefield CSS3 se spoustou výbuchů a výstřelů!

To je toho

Je to hladká a pěkná animace, díky které se toto demo stalo velkým problémem.

Can Haz Ur Kurzor?

“Ahoj, jsem Kurzor Monster. Můj papa má pro tebe zprávu: „Prosím, nepoužívej kurzor: žádný, kromě případu, kdy vytvoříte kurzor s příšerou.”

CSS Dock

Sexy experiment napodobující dok Mac OS X a je to opravdu hladké.

CSS3 Muž

Podívejte se, tady přichází muž CSS3! Perfektní příklad pro prezentaci skutečného potenciálu animace CSS3.

Dribbble Ball Bouncing

S malým využitím grafických triků přichází pěkná a zábavná animace CSS3.

Dulla

Dulla do značné míry ukazuje jednu z nejběžnějších technik používaných k vytvoření 2D plošinovky, která je nyní také možná s CSS3.

Rám podle animace snímku

Animace s rámečkem po snímku s CSS3? Žádný problém!

Animace grafu

Jednoduchá, ale výkonná animace pro vás ukázat / vysvětlit graf na vašich stránkách, naučit se to!

Vysoký

Tajemná hudební animace, která zobrazuje obrázky z Vyhledávání Google dynamicky v reálném čase a zobrazující obrázky jsou založeny na textech písní.

Hover efekty

Budoucnost efektu vznášející se přichází s CSS3. Elegantní a slibné.

Já jsem Joseph Barrett

CSS3 je integrován do ikon sociálních médií na portálovém webu. Není to jen zábava, ale také kreativita designéra.

Nekonečný zoom

Hladká animace, také pěkný způsob, jak předvést své portfolio. Celkový zoom pro 26 snímků je 67108864: 1.

Kinect a CSS3

“14 kloubů těla je sledováno a převedeno na krátkou animaci CSS pomocí Xbox Kinect. Data těla jsou uvedena do prohlížeče, kde je analyzována a převedena do animací CSS pomocí animatable.com.”

Matrice

Chcete být stejně cool jako Matrix? S CSS3 jste schopni to udělat.

Morphing kostky

Experimentální demo zkoumání CSS3 pomocí 3D transformací, animací a přechodů. Zajímavou částí zde je, že můžete stále vybrat text na prvcích, i když se stále otáčejí.

Naše sluneční soustava

Nepotřebujete drahý samostatný software, který pomůže studentům prozkoumat sluneční soustavu.

Duff Roll

“Mmmmmm… .Homer by rád nikdy nekončící nabídku piva.”

Plakát kruh

Jednoduchý, ale zajímavý příklad, jak ukázat, jak používat transformaci CSS a animaci k dosažení zajímavého efektu.

Ctihodné nebezpečí

Kdo může odolat webové stránce s opravdu roztomilé postavy a zábavné animace?

Rofox

Bezproblémové a zábavné animace, získat zdrojový kód vyzkoušet na vlastní pěst!

Ovečka Shaun

“Sledujte Shaun a jeho kamarádské antiky v klipech 'An Ill Wind', 'Snowed In', 'The Big Chase' a 'Twos Company' prostřednictvím interaktivního experimentu vytvořeného s hardwarově akcelerovaným HTML5 videem, 3D CSS Transforms a WebM.”

Prostor

Prostor je možná konečný limit pro CSS3.

Prostor CaCSS

Vytvoření magického efektu, jako je tento, není s CSS3 opravdu těžké, protože je to hlavně spravedlivé opakující se radiální gradient a velikost pozadí zúčastněných. Variace jsou možné s přiměřeným množstvím vylepšení.

Procházení hvězdných válek

Hvězdné otevření hry hvězdnými válkami! Stejně jako epos jako CSS3.

Expresivní web

Expresivní web vás nejen seznámí s CSS3 a jeho podporou prohlížeče, referencí a dokumentací, ale také představí na své webové stránce animaci CSS3..

Dopisy

Pomocí typů vytvořit stín, který vypadá jako lidská tvář, který by si myslel, že by to bylo možné s CSS3?

Muž Z Hollywoodu

Viděli jste někdy tyto atraktivní animace pouze čistou typografií? No, můžete to udělat i s CSS3.

Planetárium

Jednoduše epické demo na zkoumání planetária s podrobnostmi. Jedná se o SVG, JavaScript, HTML5, CSS3, fonty a typy.

Typ Déšť

“Předpověď pro dnešek, za předpokladu, že používáte moderní prohlížeč, je zatažená, se 100% šancí na sprchy v Gruzii.”

Typografické efekty

Kromě efektů tlačítek, menu a vznášedel můžete také dosáhnout efektů kreativní typografie pomocí CSS3. jQuery se také podílí na tomto demu, aby napsal písmena slov.

Chůze s Andrew Hoyer

Nejlepší ze všeho je, že se můžete naučit chodit s Andrewem Hoyerem v článku!

Wonder Webkit

Skvělé využití CSS3 3D transformací s JavaScript Matrix knihovnou. Zní to technicky, ale výsledek je hojně chladný.

Zoetrope

Co jiného s CSS3 nemůžete udělat, když je to možné s Zoetrope?

Odraz

Inspirující? Ano. Praktický? Možná. Animační technika je pro vývojáře a animátora vždy hlavou, která vyžaduje škrábání, protože vyžaduje určitou úroveň znalostí pro vytvoření skutečně hladké, jedinečné a stylové animace. Zatímco CSS3 má možnost udělat animaci, neznamená to, že je to vhodný nástroj pro animaci. Myslím, že nakonec je to stále o vaší preferenci, stejně jako já, jsem v pohodě s oběma, pokud nástroj vyhovuje potřebám projektu.

Co si myslíte o těchto animacích CSS3? Jsou tyto CSS3 animace dobré pouze jako experimenty, nebo mohou být také aplikovány do reálného webového designu? Jako obvykle vítáme vaše vzácné myšlenky na toto téma a dejte nám vědět také svůj oblíbený kousek CSS3 animace!

Více

Opravdu? Zasloužili jste si více! Níže jsou uvedeny návody a návody CSS3 od společnosti Hongkiat k vám, máte hezký čas na jejich prozkoumání!