hu en it en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en fr en en en en en en en en en it en en en en en en en en en en en de en en en en en en en en it it en en en en en en en de en en en en en en en en en en en ja en en en en en en en en en en en en en en en en en en en en en en en zh en en en en en en en en en nb en en en en en en en en en en en en en en en en pt en en en bn en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en it en en en en en kn en en en en en en en en en en en en en en en en en en kn en ja en en en en en en en en en it en de jbo id en en en ceb ko en en en en it en en de en en pl en en ru fr fr ceb ru ceb en en en en en en en en en en en en en en en en en en en kn en en en en en en en en en en en en en en en en kn en en en en en en en it en de jbo id en en en en en en en it en en de en en pl en en en en en en en en hu en en en en en en en ilo zh en hu hu bg hu hu hu hu eo hu hu hu en hu hu hu hu hu hu hu lt hu hu hu hu hu hu hu en hu hu hu hu hu hu hu en hu hu hu hu hu hu en hu hu hu hu hu hu hu hu hu en hu hu hu hu hu hu hu en hu hu hu en hu hu hu hu hu hu hu en hu hu hu hu hu hu en hu hu hu hu hu hu en hu hu hu hu hu hu hu bg hu hu hu hu hu hu hu hu en hu hu hu en nn hu hu en hu hu hu hu hu hu hu en hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu hu en hu eu hu hu hu hu hu en hu hu hu hu hu hu hu hu hu hu hu hu en zh en pt en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en kn en en en kn en en ml en kn en en en en en en en en en pt en en en pa en en en en en en en en en en en en en ceb en en en en en en en en fr ru en en en en en it en en en en en en en en fi en en es en en en en fr fr en en en en en ar en
A 20 legjobb CSS animáció a CodeCanyonon
7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Photo & Video View all Photo & Video
popular software in Photo & Video
Web Design View all Web Design
popular software in Web Design
A 20 legjobb CSS animáció a CodeCanyonon
Eric Dye Feb 25, 2021
Read Time: 6 mins বাংলা Čeština Deutsch eλλnvιkά English Español हिंदी Hrvatski Magyar Bahasa Indonesia 한국어 Português Pycckий Slovenčina Wikang Tagalog ykpaïHcbka MoBa Tiếng Việt
Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)
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
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.
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:
4 alakzat és 5 szín
é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.
jó dokumentáció a könnyű testre szabáshoz
egy pehelykönnyű és rugalmas CSS3 animációs készlet
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?
A CSS3 Image Hover Effects néhány igazán szép és egyedi hatást foglal magába.
22 különböző CSS3 kép hover effektust
é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
é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
é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
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.
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.
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.
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).
é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:
é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.
22 tartalom áttűnési hatást
18 overlay áttűnési hatást
23 gomb áttűnési effektust
A JavaScript vagy jQuery használata nélkül, és egy tiszta CSS, a Sinister – Pure CSS Image Hover Effects használatával megoldható:
X és Y forgatás
balra és jobbra forgatás
é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
é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.
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ó.
könnyű használat és testreszabhatóság
csak CSS3, semmi Javascript
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.
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:
é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.
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.
CSS AnimationCSS3CSSWeb DesignWeb Development
Did you find this post useful?
Would you like to provide feedback (optional)?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
I am the Proprietor of ChurchMag, freelancer, and lover of coffee.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories
Curated Web Design Assets
WordPress Themes for Consultants
Web Themes & Templates
After Effects Slideshow Templates
Premiere Pro Video Intro Templates
Final Cut Pro Templates
Final Cut Pro Title Templates
Premiere Pro Video Effects
Keynote Pitch Deck Templates
Google Slides Business Templates
PowerPoint Pitch Deck Templates
Best Shopify Mobile Themes
Video To Gif Converter
How to Use WordPress
How to Use PowerPoint
Teach at Envato Tuts+
Translate for Envato Tuts+
© 2022 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.