15 49.0138 8.38624 1 0 4000 1 https://www.brickmovie.net 300 0
theme-sticky-logo-alt
theme-logo-alt

24 najlepších ukážok a návodov pre animáciu CSS3

Dnes predstavujeme príspevok na CSS3 Animation s niektorými z najlepších a najúžasnejších funkcií. CSS3 je plný úžasných funkcií, ktoré môžete využiť a o ktorých možno ani neviete. Preto sa pozrieme na niektoré z tých funkcií CSS3, ktoré sú menej preskúmané. Jednou z jeho najúžasnejších funkcií je CSS3 Animation, ktorá je zábavná a má vynikajúci efekt. Všetky tieto návody sú veľmi užitočné a niektoré je dokonca možné použiť aj ako alternatívy jazyka Javascript. Pozrite sa na tieto animácie a získajte inšpiráciu pre svoj vlastný projekt. Budete milovať to, čo vám ukážeme!

Niektoré z týchto efektov animácie CSS3, ktoré nájdete nižšie, nemusia byť pre vás viditeľné, ak používate prehliadač Firefox. Ak je to tak, budete si musieť stiahnuť alternatívny prehliadač, aby ste si mohli náš zoznam pozrieť celý. Osobne vám odporúčame používať prehliadač Google Chrome, pretože je to jedna z najlepších alternatív k Firefoxu. Okrem toho môžete použiť Safari alebo dokonca Internet Explorer. Voľba je úplne na vás. Nájdite prehliadač, ktorý vyhovuje vašim preferenciám.

Ako už bolo povedané, dúfame, že sa vám náš zoznam páči  24 najlepších ukážok a návodov pre animáciu CSS3.

Zobrazte sociálne ikony nádherným spôsobom pomocou CSS3

Tento príklad funguje so všetkými prehliadačmi založenými na webovom serveri (Safari a Chrome), ale aj s prehliadačom Firefox 4. Autor zahrnul aj verziu jQuery, ktorá sa má používať ako forma „spätnej kompatibility“. Môžete tiež vidieť, ako je možné dosiahnuť rovnaký efekt pomocou CSS a jQuery.

Zobrazte sociálne ikony nádherným spôsobom pomocou CSS3

Viac informácií o krásnom zobrazení sociálnych ikon pomocou CSS3

3D animácia pomocou čistého CSS3

Perspektívna vlastnosť je to, čo potrebujeme na vytvorenie 3D efektu. Pomocou transformácie a prechodu môžeme vytvoriť 3D animáciu pomocou čistého CSS3.

3D animácia pomocou čistého CSS3

Viac informácií o 3D animácii pomocou čistého CSS3

Farebné hodiny

Vytvorte farebný jQuery & Hodiny CSS, ktoré vám pomôžu sledovať tie vzácne posledné sekundy v roku.

Farebné hodiny

Viac o farebných hodinách

Farebný hodnotiaci systém s CSS3

Urobíme relatívne jednoduchý návod jQuery. Na webových stránkach sa často používa systém hodnotenia, napríklad na hodnotenie toho, ako dobrý je určitý produkt, článok alebo komentár. Trochu som chcel túto myšlienku vylepšiť tak, aby bola vizuálne atraktívnejšia.

Farebný hodnotiaci systém s CSS3

Viac o farebnom hodnotiacom systéme s CSS3

Dynamická poloha tieňa PNG & nepriehľadnosť

Keď je svetlo zapnuté, poloha a nepriehľadnosť tieňa loga sa bude dynamicky meniť v závislosti od polohy a vzdialenosti žiarovky. Nezabudnite potiahnuť logo a/alebo žiarovku okolo!

Dynamická poloha tieňa PNG & amp; nepriehľadnosť

Viac o dynamickej polohe tieňa PNG & nepriehľadnosť

jQuery DJ Hero

Kombináciou CSS3 a jQuery som vytvoril dva záznamy, ktoré môžete začať točiť (rýchlejšie a pomalšie) a dokonca je povolené aj škrabanie. V budúcej verzii by to mohlo byť použité spolu s nejakým skutočným zvukom (táto verzia nemá zvuk).

jQuery DJ Hero

Viac o jQuery DJ Hero

Bokeh efekty s CSS3 a jQuery

Tento tutoriál vás naučí, ako znova vytvoriť efekt bokeh pomocou CSS 3. S pomocou jQuery môžeme k efektu pridať náhodnosť farby, veľkosti a polohy..

Bokeh efekty s CSS3 a jQuery

Viac o efektoch Bokeh s CSS3 a jQuery

Priestor je konečný limit, nie?

Bez ohľadu na to, aké rýchle sú internetové trubice alebo servery, vždy budeme potrebovať číselníky, ktoré naznačia, že sa niečo deje v zákulisí. Doteraz ľudia chodili na nejaký web, vybrali si jednu z dostupných šablón, prispôsobili si farby popredia a pozadia a stiahli si krásny obrázok vo formáte GIF..

priestor je konečný limit, však?

Viac o priestore je konečný limit, nie?

Ako vytvoríte sexy vertikálny posuvný panel pomocou jQuery a CSS3

Čo teda s vertikálnym posuvným panelom, ktorý by slúžil ako nejaký druh zásuvky namiesto obvyklého horného horizontálneho posuvného panelu, ktorý pri otvorení zatlačí všetko ostatné nadol? Pri premýšľaní o alternatívach k bežným horizontálnym panelom som si povedal, že by bolo pekné vytvoriť niečo, čo funguje podobným spôsobom, ale je to o niečo flexibilnejšie..

Ako vytvoríte sexy vertikálny posuvný panel pomocou jQuery a CSS3

Viac informácií o tom, ako vytvoriť sexy vertikálny posuvný panel pomocou jQuery a CSS3

Animácia po snímkach

Prvá ukážka vyžaduje, aby ste kliknutím na obrázok zobrazili ďalší rámček, a keď sa dostanete na posledný rámček, zalomí sa na začiatok. Pri druhej ukážke je potrebné, aby ste myšou vo väčšine prehliadačov pohybovali myšou nad obrázkom. VEĽKOU nevýhodou tejto metódy je však to, že rýchlosť pohybu myši určuje rýchlosť animácie

Animácia po snímkach

Viac o animácii Frame-by-Frame

Analógové hodiny CSS3

Analógové hodiny vytvorené pomocou webkitového prechodu a transformácie CSS. JavaScript sa používa iba na načítanie v aktuálnom čase.

Analógové hodiny CSS3

Viac o analógových hodinách CSS3

Reflektor vrhá tieň

Presuňte kurzor na pole a vrhnite tieň pomocou reflektorov. Toto demo používa textový tieň CSS, podporovaný v prehliadačoch Safari, Firefox 3.5, Opera a Chrome.

Reflektor vrhá tieň

abc

Viac na Spotlight Cast Shadow

Posuvný vinyl s CSS3

Berieme štandardný obal albumu, malý HTML a niektoré prechody a transformácie CSS3, aby sme vytvorili posuvný vinylový efekt na predvádzanie hudby, ktorú milujeme.

Posuvný vinyl s CSS3

Viac o posuvnom vinyle s CSS319

Úžasné efekty vznášania obrázkov pomocou Webkit a CSS

oblasti

Úžasné efekty vznášania obrázkov pomocou Webkit a CSS

Viac informácií o úžasných efektoch vznášania obrázkov pomocou Webkit a CSS

Pomocou CSS3 vytvorte dynamický zásobník indexových kariet

Vytvoríme dynamický stoh indexových kariet výlučne s HTML a CSS3 a použijeme také funkcie CSS3, ako sú transformácia a prechod (pre dynamické efekty) a @font-face, box-shadow a border-radius (pre štýl).

Pomocou CSS3 vytvorte dynamický zásobník indexových kariet

Viac informácií o použití CSS3 na vytvorenie dynamického balíka indexových kariet

Úžasné prekrytia s CSS3

Trikom týchto prekrytí je hranica gradientu, ktorá pri prechode zhora nadol bude tvoriť svetlejšiu až tmavšiu oranžovú. Na vytvorenie tohto efektu sme použili vlastnosť border-image, ktorá je v CSS zložitým malým doplnkom.

Úžasné prekrytia s CSS3

Viac o úžasných prekrytiach s CSS3

Orechové s prechodmi CSS

Autor vám ukáže, ako transformácie CSS 3 a prechody WebKit môžu prispieť k spôsobu, akým prezentujete obrázky na svojom webe..

Orechové s prechodmi CSS

Viac o Going Nuts s prechodmi CSS

Animácie CSS3 a ich ekvivalenty jQuery

Tento tutoriál/tieto príklady ukážu použitie rovnakého HTML s rôznymi triedami pre CSS3 a jQuery. Môžete porovnať oba kódy a zistiť, ktorý sa vám páči viac. Nezabudnite skontrolovať ukážku/stiahnuť zdrojový kód, aby ste zistili, ako všetko funguje.

Animácie CSS3 a ich ekvivalenty jQuery

Viac o animáciách CSS3 a ich ekvivalentoch jQuery

Snowy CSS3 Animácia

Dole v Brightone je zima a sneh, takže na oslavu padajúcich bielych vecí (a samozrejme rôznych slávností v tomto ročnom období) vlastný Natbat od Clearleftu urobil zasnežené CSS3 animačné prekvapenie pre všetkých Safari a Chrome používateľov tam vonku.

Snowy CSS3 Animácia

Viac o Snowy CSS3 Animation

Viac o transformáciách 3D CSS

Rôzne transformácie 3D CSS v prehľade.

Viac o transformáciách 3D CSS

Viac informácií Viac o 3D transformáciách CSS

Hodiny CSS3 s jQuery

Old School Hodiny s CSS3 a jQuery.

Hodiny CSS3 s jQuery

Viac o hodinách CSS3 s jQuery

Obnovenie doku OS X

Berieme základný zoznam odkazov a zmeníme ich na úžasný dok s ikonami OS X.

Obnovenie doku OS X

Viac informácií o opätovnom vytvorení doku OS X

Efekt Coverflow s transformáciami CSS a používateľským rozhraním jQuery

Tento koncept ukazuje efekt krycieho toku pomocou novej funkcie transformácie CSS od Webkit (uvedená v Safari 3.1). Netreba dodávať, že v tomto mieste neprebieha v iných prehliadačoch (prispôsobenie na plátno by však malo byť celkom jednoduché a ani teraz sa v iných prehliadačoch nerozbije).

Efekt Coverflow s transformáciami CSS a používateľským rozhraním jQuery

Viac o efekte Coverflow s transformáciami CSS a používateľským rozhraním jQuery

Pružná ponuka miniatúr

V rámci pokračujúceho pokusu ponúknuť alternatívne metódy na spestrenie ponúk, autor zostavil elastickú ponuku miniatúr..

Pružná ponuka miniatúr

Viac informácií o ponuke Elastické miniatúry

To sú celkom pekné efekty, však? Stavím sa, že ste netušili, že CSS3 je taký silný programovací jazyk. No, teraz to robíte! Teraz pomocou týchto tutoriálov môžete vytvárať svoje vlastné animácie v CSS3. Tieto návody môžete sledovať presne tak dlho, kým nebudete rozumieť jazyku, a potom môžete začať pracovať na svojich vlastných jedinečných animáciách.

Previous Post
30 užitočných nástrojov pre drôtové modely
Next Post
65 de imagini de copaci pentru a te face să iubești mai mult natura