A 20 legjobb CSS animáció a CodeCanyonon

Volt olyan időszak az internet történetében, amikor Flasht kellett használnod, ha az animált GIFeken túl valamilyen vizuális hatást szerettél volna hozzáadni a weboldaladhoz. Ha megnézzük, hogy most mi a helyzet, azt látjuk, hogy a Flash halott, és az olyan dolgok, mint a CSS3 és a HTML5 fantasztikus animációkat és hatásokat biztosítanak a webnek.

Ha szeretnél hozzáadni néhány nagyszerű CSS animációt a weboldaladhoz vagy a következő webes projektedhez, itt egy lista kezdésnek a CodeCanyon 20 legjobb CSS animációjáról.

1. Aero – CSS3 Hover Effects

Adj a képeidhez néhány glass aero image hover effektust az Aero – CSS3 Hover Effects-szel.

Teljesen reszponzív és könnyen használható, valamint:

• könnyű a színeket megváltoztatni és átváltani körről négyzetre
• minden böngészővel kompatibilis – még a Microsoft Edge-dzsel is
• SASS kompatibilis
• testre szabható CSS
• és még sok más!

A benne lévő 10 effektussal és várható továbbiakkal együtt az Aero – CSS3 Hover Effects egy szép csokor CSS animáció a képeid hover effektusához

2. MegaHover Mouse Over Effects

A MegaHover Mouse Over effektus nagy csomag CSS3 kép hover effektust kínál, ami Bootstrap 3 kompatibilis.

Ezen kívül:

• Font Awesome ikonokat használ
• keresztböngésző-kompatibilis
• teljesen reszponzív
• és még sok más

A MegaHover Mouse Over Effects könnyen integrálható és módosítható több száz jól kinéző hover effektussá.

3. Animatia – CSS ImageHover  Effects

Könnyű használat, minimális betöltési idő, nagyfokú testreszabhatóság? Az Animatia – CSS kép Hover effektus tudja mindezt és még sok mást.

Ebben a CSS csomagban:

• több mint 115 testreszabható hover effektus
• teljesen reszponzív és könnyen használható fájlok
• tiszta CSS3 és Font Awesome ikonok
• és még sok más

Használd az Animatia – CSS Image Hover Effects-et gombstílusokhoz, overlay hatásokhoz, címekhez és más CSS animációkhoz.

4. Hover Effects Framework

A Hover Effects Framework egy kiváló CSS animációs megoldás.

Tiszta kód, teljesen reszponzív, és:

• IcoMoon Ultimate betűtípus
• 4 alakzat és 5 szín
• 50+ animáció
• és még sok más

A Hover Effects Frameworknek tiszta kódja van, és ami a legjobb, hogy rengeteg példát tartalmaz az induláshoz, jó néhány szép kinézetű CSS animációval.

5. Collenction of Preloaders

Talán soha többé nem lesz szükséged egy másik előtöltő gyűjteményre, miután beszerezted a Collection of Preloaderst.

Ezt kapod:

• jó dokumentáció a könnyű testre szabáshoz
  
• egy pehelykönnyű és rugalmas CSS3 animációs készlet
• 27 egyedi előtöltő

A teljes egészében mobilbarát Collection of Preloaders egy nagyszerű kiegészítő bárki CSS3 eszköztárához.

6. CSS3 Image Hover Effects

Ha látsz egy CSS animációt a kép hover effekthez, már mindet láttad, igaz?

Nem egészen.

A CSS3 Image Hover Effects néhány igazán szép és egyedi hatást foglal magába.

Magába foglal:

• 22 különböző CSS3 kép hover effektust
• teljes reszponzivitást
• tiszta CSS3 kódot
• és még sok mást

Nézd meg a CSS3 Image Hover Effects Bootstrap kompatibilitását.

7. Image Hover CSS Library

Az Image Hover CSS Library egy skálázható, pehelykönnyű kép hover CSS animációs könyvtár, amit érdemes megnézni.

Ez 58 klasszikus hover effektus osztály gyűjteménye, mindössze 25KB-on.

• bármilyen hover tartalommal működik
• egyedi hover effektusok
• könnyű használat
• és még sok más

Nehéz megválni a már jól bevált hover CSS animációktól, de az Image Hover CSS Library megéri a váltást.

8. SVG Logo Scroll Animation | CSS3 and Javascript

Jó dolog elszakadni a szokásos CSS animációktól – kép hover effektusoktól –, és vetni egy pillantást valami olyasmire, mint az SVG Logo Scroll Animation | CSS3 and Javascript.

Alig 4K méretű, de jópár gyönyörű oldalgörgetési SVG animációt ad.

Készíts néhány gyönyörű weboldal animációt az SVG Logo Scroll Animation | CSS and Javascripttel.

9. Viavi CSS3 Scroll Effects

A Viavi CSS3 Scroll Effects egy nagyon jó kinézetű CSS3 HTML görgetési animációs megoldás.

Néhány a képességei közül:

• 16 CSS3 görgető hatás
• egyszerű implementálás
• teljes reszponzivitás
• és még sok más

A grid rendszerek és az érintésérzékeny mobil használatra kifejlesztett Viavi CSS3 Scroll Effects nem csak hogy jól néz ki, de nagyon jól beilleszthető.

10. CSS3 Spinners & Loaders

Gifek nélküli betöltőkre van szükséged?

Nem probléma. A CSS3 Spinners & Loaders házhoz hozza.

• több mint 25 változat
• könnyen testreszabható
• könnyen bővíthető

A CSS3 Spinners & Loaders jól dokumentált és egy teljes CSS megoldás előtöltőkhöz.

11. Midix – CSS3 Animation Effects without jQuery

A Midix – CSS3 Animation Effects without jQuery tiszta CSS3-at használ, 16 CSS animációból álló készletet biztosít.

Beállíthatod:

• az animáció sebességét
• az animáció késleltetését
• az ikon színeket

Nem csak egy csodálatos CSS animációs gyűjteményt kapsz a Midix – CSS3 Animation Effects without jQuery-vel, hanem ingyenes frissítéseket és barátságos ügyféltámogatást is.

12. CSS3 Hover Effects

A CSS3 Hover Effects egy másik jó választás lehet.

Könnyen megváltoztathatod:

• a színt
• a szegély méretét
• a kört vagy négyzetet
• a szövegblokkok közti távolságot

A CSS3 Hover Effects a maga 479 retina ikonjával és 20 különböző effektusával egy kiváló forrásgyűjtemény.

13. VSPreloader – Ultimate CSS Animated Preloaders

Az animált előtöltők közül a VSPreloader – Ultimate CSS Animated Preloaders az egyik legegyedibb, legkreatívabb és legjobb kinézetű, amit csak találhatsz.

Tulajdonságai többek között:

• 60 segítő
• 40 előbeállítás
• 30 animáció
• korlátlan színek

Ezen kívül elképesztően éles és egyedi.

Nézd meg alaposabban a VSPreloader – Ultimate CSS Animated Preloaderst. Azt hiszem, le leszel nyűgözve.

14. Heed – Pure CSS3 Animation Effects

A Heed – Pure CSS3 Animation Effects mindent biztosít, amire szükséged lehet, egy CSS animációs gyűjteményben.

Könnyű telepíteni, szerkeszteni és konfigurálni SCSS-sel (a fájlokat tartalmazza).

• 20 anyagtervezési színlehetőség
• Font Awesome ikonok
• 15 effektus
• és még sok más

A Heed – Pure CSS3 Animation Effects egy retinabarát, támogatásbarát, és ingyenes frissítéseket foglal magába.

15. Ayan – CSS3 Link Hover Effects

Míg a legtöbb CSS animáció a kép- és oldaleffektusokra koncentrál, addig az Ayan – CSS3 Link Hover Effects a link hover effektusok lenyűgöző sorát biztosítja.

A csomagban 30 nagyszerű kinézetű CSS3 link hover effektust találsz, valamint:

• stabil böngésző kompatibilitást
• súgó dokumentációt
• modern animációkat
• és még sok mást

Az Ayan – CSS3 Link Hover Effects csomag kreatív, kiváló és szép CSS animációkat kínál anélkül, hogy túlságosan villogó lenne.

16. Sinister – Pure CSS Image Hover Effects

Több mint 100 hover effektusával a Sinister - Pure CSS Image Hover Effects elképesztő számú, jól megtervezett effektust kínál.

Magába foglal:

• 22 tartalom áttűnési hatást
• 18 overlay áttűnési hatást
• 23 gomb áttűnési effektust
• 100 hover hatás

A JavaScript vagy jQuery használata nélkül, és egy tiszta CSS, a Sinister – Pure CSS Image Hover Effects használatával megoldható:

• nagyítás és kicsinyítés
• X és Y forgatás
• balra és jobbra forgatás
• forgatás és skálázás
• négyzetes áttűnés
• réteg hover
• és még sok más

17. Stylish Social Media Animated Icons Style

Adj hozzá néhány szép CSS animációt a közösségi média ikonjaidhoz a Stylish Social Media Animated Icon Style-lal.

A letisztult kinézeten és a kilenc különféle, választható stíluson kívül még:

• könnyen implementálható és testreszabható
• szilárd kódbázis és dokumentáció
• nincs kép- vagy ikonfüggőség
• kereszt-böngésző kompatibilitás
• és még sok más

A Stylish Social Media Animated Icons Style szép színpalettát és CSS animációkat kínál a közösségi média ikonjaidhoz.

18. CSS3 Animációk

A CSS3 Animations-szal könnyen animálhatod a div, p és body HTML-edet.

Szép kis kódgyűjtemény, ami sokféle tervezési helyzethez használható és alkalmazható.

Tulajdonságai többek között:

• könnyű használat és testreszabhatóság
• csak CSS3, semmi Javascript
• 10+ animáció

Hozzá fogod adni a CSS3 Animationst a dizájn eszköztáradhoz?

19. Pure CSS3 Image Accordion

Készítsd el a saját slidereidet vagy hasonlóakat a Pure CSS3 Image Accordionnal a jó kinézetű CSS animációk érdekében.

Ez:

• teljesen reszponzív
• nincs fix szélesség
• négy címzési lehetőség
• könnyen testreszabható

Hozz létre vizuális élményt a Pure CSS3 Image Accordionnal.

20. CSS3 Mega Tooltip Animation Pack

Unod már az egyszerű tooltip-eket?

Adj hozzá néhány CSS animációs varázslatot a CSS3 Mega Tooltip Animation Packkal.

Ez a CSS animációs eszköztár csomag magába foglalja:

• 10 animációs effektus
• 8 színpaletta
• dokumentáció
• és még sok más

A CSS3 Mega ToolTip Animation Pack szintén magába foglal egy Internet Explorer kiegészítést is.

Konklúzió

Bár rengeteg különféle CSS animáció elérhető az Envato Marketen, lehet, hogy továbbra sem találod meg pontosan azt, amit keresel.

Nem probléma. Elkészítheted a sajátodat!

Nézd meg az olyan Envato ekönyveket, mint a Mastering CSS3, vegyél részt valamelyik kódoló kurzusunkon, vagy nézz körül a CSS3 Code Tutorialban.