Advertisement
  1. Web Design
  2. HTML/CSS
  3. Animation

20 Nejlepších CSS animací na CodeCanyon

Scroll to top
Read Time: 6 min

() translation by (you can also view the original English article)

V minulosti existovalo období, kdy jste museli používat Flash, pokud jste chtěli přidat na vaši stránku nějaké vizuální efekty, mimo GIFu. Vrátíme se do dneška a zjistíme, že Flash je mrtvý a CSS3 s HTML5 přinášejí fantastické animace a efekty na web.

Pokud chcete přidat na vaši stránku nebo webový projekt CSS animace, zde je 20 nejlepších CSS animací na CodeCanyon:

1. Aero - CSS3 Hover Effects

Přidá efekt stínovaného aero skleněného snímku - CSS3 Hover Effects.

Aero - CSS3 Hover EffectsAero - CSS3 Hover EffectsAero - CSS3 Hover Effects

Je plně responsivní, jednoduše se používá a také se s ním:

  • lehce mění barvy a přehazuje z kruhu na čtverec
  • kompatibilní se všemi prohlížeči - dokonce i Microsoft Edge
  • kompatibilní s SASS
  • upravitelné CzS
  • a další!

S 10 obsaženými efekty v releasu a dalšími efekty, které se přidají, Aero - CSS3 Hover Effects je skvělý balík CSS animací pro vaše hover efekty.

2. MegaHover Mouse Over Effects

MegaHover Mouse Over Effects nabízí robustní balení CSS3 efektu pro hover, které je Bootstrap 3 kompatibilní.

MegaHover Mouse Over EffectsMegaHover Mouse Over EffectsMegaHover Mouse Over Effects

Také je:

  • používa ikony Font Awesome
  • kompatibilní mezi prohlížeči
  • plně responsivní
  • a více

Jednoduše integrujte a modifikujte MegaHover Mouse Over Effects do stovek dobře vypadajících hover efektů.

3. Animatia - CSS Image Hover Effects

Jednoduše použitelný, minimální nahrávací čas a vysoce upravitelný? Animatia CSS Image Hover Effects je přesně takový a ještě mnohem lepší.

Animatia - CSS Image Hover EffectsAnimatia - CSS Image Hover EffectsAnimatia - CSS Image Hover Effects

Tato várka CSS obsahuje:

  • Přes 115 vysoce upravitelných hover efektů
  • plně reponsivní a jednoduše použitelné soubory
  • čisté CSS3 a Font Awesome ikony
  • a více

Použijte Animatia - CSS Image Hover Effects pro styl tlačítek, overlay efekty, popisky a další CSS animace.

4. Hover Effects Framework

Hover Effects Framework je opravdu čisté řešení CSS animací.

Hover Effects FrameworkHover Effects FrameworkHover Effects Framework

Čistý kód, plně responsivní a:

  • IcoMoon Ultimate Font
  • 4 tvary a 5 barev
  • 50+ animací
  • a více

Hover Effects framework má čistý kód a nejlepší je, že obsahuje příklady pro začátek s dobře vypadajícími CSS animacemi.

5. Collection of Preloaders

Už možná nebudete potřebovat další kolekci preloaderu, po stažení této kolekce.

Collection of PreloadersCollection of PreloadersCollection of Preloaders

Dostanete:

  • dobrou dokumentaci pro jednoduché úpravy
  • jednoduchá a flexibilní sada CSS3 animací
  • 27 unikátních preloaderů

Skvělá pro mobilní zařízení, kolekce preloaderů je skvělý přídavek v CSS3 nástrojích.

6. CSS3 Image Hover Effects

Pokud jste viděli jednu CSS animaci pro hover nad snímky, viděli jste je všechny, že?

Ani ne.

CSS3 Image Hover Effects obsahuje pár opravdu pěkných a unikátních efektů.

CSS3 Image Hover EffectsCSS3 Image Hover EffectsCSS3 Image Hover Effects

Obsahuje:

  • 22 různých CSS3 hover efektů
  • Úplně skvělý a responsivní
  • čistý CSS3 kód
  • a další

Podívejte se na Bootstrap kompatibilní CSS3 Image Hover Effects.

7. Image Hover CSS Library

Image Hover CSS Library je škálovatelná, jednoduchá knihovna CSS animací, která stojí za to.

Image Hover CSS LIbraryImage Hover CSS LIbraryImage Hover CSS LIbrary

Tato nóbl kolekce 58 efektů minimalizována na pouze 25KB.

  • funguje s jakýmkoli obsahem
  • unikátní hover efekty
  • snadno se používá
  • a další

Je těžké se odlišit od jiných hover CSS animací, ale Image Hover CSS Library do zvládla.

8. SVG Logo Scroll Animation | CSS3 a Javascript

Je pěkné se odpoutat od obvyklých CSS animací - image hover efekty - a podívat se na něco jako je SVG Logo Scroll Animation | CSS3 and Javascript.

SVG Logo Scroll Animation CSS3 and JavascriptSVG Logo Scroll Animation CSS3 and JavascriptSVG Logo Scroll Animation CSS3 and Javascript

V méně než 4k, přidává krásnou scrollovací stránku SVG animací.

Vytvořte nádherné webové animace pomocí SVG Logo Scroll Animation | CSS3 and Javascript.

9. Viavi CSS3 Scroll Effects

Viavi CSS3 Scroll Effects je velice dobře vypadající řešení CSS3 HTML Scroll animací.

Viavi CSS3 Scroll EffectsViavi CSS3 Scroll EffectsViavi CSS3 Scroll Effects

Některé funkce:

  • 16 CSS 3 scroll efekty
  • jednoduchá implementace
  • plně responsivní
  • a další

Využívá system mřížky a povoluje dotek pro mobilní použití, Viavi CSS3 Scroll Effects nejen, že vypadá dobře, ale také se dobře implementuje.

10. CSS3 Spinners & Loaders

Potřebujete loader bez gifu?

Žádný problém. CSS3 Spinners & Loaders dodá.

CSS3 Spinners LoadersCSS3 Spinners LoadersCSS3 Spinners Loaders
  • přes 25 variací
  • lehce upravitelné
  • lehce rozšiřitelné

CSS3 Spinners & Loaders je dobře zdokumentován a je to řešení pro spinnery a loadery.

11. Midix - CSS3 Animation Effects without jQuery

Použití čistého CSS3, Midix - CSS3 Animation Effects without jQuery dodá sadu 16 CSS animací.

Midix - CSS3 Animation Effects without jQueryMidix - CSS3 Animation Effects without jQueryMidix - CSS3 Animation Effects without jQuery

Můžete upravit:

  • rychlost animace
  • prodleva animace
  • barvy ikon

S Midix - CSS3 Animation Effects without jQuery nedostanete pouze skvělou kolekci CSS animací, ale také updaty a přátelskou podporu.

12. CSS3 Hover Effects

CSS3 Hover Effects je další dobrá volba.

CSS3 Hover EffectsCSS3 Hover EffectsCSS3 Hover Effects

Můžete jednoduše změnit:

  • barvu
  • velikost okraje
  • kolečko na čtverec
  • mezery mezi bloky textu

S 479 retina ikonami a 20 různými efekty, CSS3 Hover Effects je skvělým zdrojem.

13. VSPreloader - Ultimate CSS Animated Preloaders

Jak to s preloadery bývá, VSPreloader - Ultimate CSS Animated Preloaders je jedno z těch unikátních, kreativních a dobře vypadajících řešení.

VSPreloader - Ultimate CSS Animated PreloadersVSPreloader - Ultimate CSS Animated PreloadersVSPreloader - Ultimate CSS Animated Preloaders

Funkce zahrnují:

  • 60 pomocníků
  • 40 presentů
  • 30 animací
  • nekonečné barvy

Je taky neskutečně ostrý a unikátní.

Podívejte se blíže na VSPrealoder - Ultimate CSS Animated Preloaders. Myslím že budete ohromeni.

14. Heed - Pure CSS3 Animation Effects

Heed - Pure CSS3 Animation Effects nabízí vše co můžete chtít od kolekce CSS animací.

Heed - Pure CSS3 Animation EffectsHeed - Pure CSS3 Animation EffectsHeed - Pure CSS3 Animation Effects

Jednoduše se instaluje, upravuje a konfiguruje s SCSS (soubor přiložen).

  • 20 možností designu barev
  • Skvělé ikony
  • 15 efektů
  • a další

Heed - Pure CSS3 Animation Effects je retina friendly a obsahuje updaty zdarma.

15. Ayan - CSS3 Link Hover Effects

Zatímco mnoho CSS animací se zaměřuje na snímky a efekty stránek, Ayan CSS3 Link Hover Effects nabízí impresivní seznam hover efektů.

Ayan - CSS3 Link Hover EffectsAyan - CSS3 Link Hover EffectsAyan - CSS3 Link Hover Effects

Je zde 30 skvěle vypadajících CSS3 hover efektů a:

  • solidní podporu prohlížečů
  • help dokumentace
  • moderní animace
  • a další

Ayan - CSS3 Link Hover Effects balík je kreativní, přesný a přídá krásný dojem CSS animací bez toho aniž by byl moc oslnivý.

16. Sinister - Pure CSS Image Hover Effects

Obsahuje přes 100 hover efektů, Sinister - Pure CSS Image Hover Effects nabízení zajímavé číslo dobře vytvořených efektů.

Sinister - Pure CSS Image Hover EffectsSinister - Pure CSS Image Hover EffectsSinister - Pure CSS Image Hover Effects

Obsahuje vice než:

  • 22 obsahových efektů přechodu
  • 18 přechodů efektu překrytí
  • 23 efektu přechodu tlačítek
  • 100 hover efektů

Bez použití JavaScriptu nebo jQuery a použitím čistého CSS, Sinister - Pure CSS Image Hover effects představuje:

  • zoom-in a zoom-out
  • rotace X a rotace Y
  • rotace doprava a doleva
  • rotace a změna měřítka
  • kostkový přechod
  • hover přes vrstvu
  • a další

17. Stylish Social Media Animated Icons Style

Přidejte krásné CSS animace na vaše ikony sociálních medií pomocí stylových animovaných ikon.

Stylish Social Media Animated Icons StyleStylish Social Media Animated Icons StyleStylish Social Media Animated Icons Style

S čistým designem a devíti různými styly ze kterých můžete vybírat, si také užijete:

  • jednoduchá implementace a upravitelnost
  • kvalitní kód a dokumentace
  • bez závislosti na snímcích nebo ikonách
  • podpora více prohlížečů
  • a další

Stylish Social Media Animated Icons Style přidá krásný nádech barev a CSS animací do vašich ikon sociálních medií.

18. CSS3 Animace

Jednoduše animujte váš div, p a body HTML s CSS3 Animations.

CSS3 AnimationsCSS3 AnimationsCSS3 Animations

Toto je nádherný snippet, který může být použit a aplikován v mnoha různých situacích.

Obsahuje:

  • jednoduché použití a úprava
  • pouze CSS3, žádný JavaScript
  • 10+ animací

Chcete přidat CSS3 Animations do vaši sady nástrojů?

19. Pure CSS3 Image Accordion

Vytvořte váš vlastní slider nebo podobné pomoci Pure CSS3 Image Accordion pro dobře vypadající CSS animace.

Pure CSS3 Image AccordionPure CSS3 Image AccordionPure CSS3 Image Accordion

je to:

  • plně responsivní
  • nemá fixní šířku
  • čtyři možnosti popisu
  • jednoduše upravitelná

Zvizualizujte hudbu s Pure CSS3 Image Accordion.

20. CSS3 Mega Tooltip Animation Pack

Unaveni jednoduchými tooltipy?

Přidejte nějaké CSS animace pomocí CSS3 Mega Tooltip Animation Pack.

CSS3 Mega Tooltip Animation PackCSS3 Mega Tooltip Animation PackCSS3 Mega Tooltip Animation Pack

Tento CSS tooltip animaci obsahuje:

  • 10 efektů animací
  • 8 barevných přednastavení
  • dokumentace
  • a další

CSS3 Mega Tooltip Animation Pack také obsahuje podporu Internet Exploreru.

Závěr

Dokonce i s různými CSS animacemi, které jsou k dispozici na Envato Marketu, je možné, že nenajdete přesně to co hledáte.

Není problém. Můžete si vytvořit váš vlastní!

Podivejte se na Envato eBooky jako Mastering CSS3, vyberte si jeden z mnoha různých kurzů kódování nebo sledujte CSS3 Code Tutorial.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.