Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS Animation
Code

कोडकैन्यन (CodeCanyon) पर 20 सर्वश्रेष्ठ सीएसएस एनिमेशन (CSS Animations)

by
Length:LongLanguages:

Hindi (हिंदी) translation by Satyam Sh. (you can also view the original English article)

इंटरनेट इतिहास में एक समय था जब आपको फ्लैश का उपयोग करना पड़ता था, अगर आप किसी एनिमेटेड GIF से परे आपकी वेबसाइट पर कुछ दृश्य प्रभाव (visual effects) जोड़ना चाहते थे। आज के लिए फास्ट फॉरवर्ड, और हम फ्लैश को मृत पाते हैं और CSS3 और HTML5 जैसी चीजें शानदार एनिमेशन और वेब इफेक्ट्स लाती हैं।

यदि आप अपनी वेबसाइट या अगली वेब प्रोजेक्ट में कुछ महान सीएसएस एनिमेशन जोड़ना चाहते हैं, तो आपको शुरू करने के लिए कोडकैन्यन (CodeCanyon) पर 20 सर्वश्रेष्ठ सीएसएस एनिमेशन की एक सूची है:

1. एयरो - CSS3 हॉवर इफेक्ट्स

एयरो - CSS3 हॉवर इफेक्ट्स के साथ कुछ छायांकित ग्लैस एयरो चित्र इफेक्ट्स प्रभाव (shaded glass aero image hover effects) जोड़ें।

Aero - CSS3 Hover Effects

यह पूरी तरह उत्तरदायी और उपयोग में आसान है, और आपको यह भी मिलेगा:

  • रंग बदलने और चक्र से वर्ग तक स्विच करने में आसान है
  • सभी ब्राउज़रों के साथ संगत-यहां तक कि माइक्रोसॉफ्ट एज (Microsoft Edge) भी
  • SASS के साथ संगत 
  • अनुकूलन योग्य CzS 
  • और अधिक! 

रीलीस में शामिल 10 इफेक्ट्स और अधिक इफेक्ट्स आने के साथ, एयरो - CSS3 हॉवर प्रभाव आपकी छवि होवर इफेक्ट्स के लिए सीएसएस एनिमेशन का बहुत बढ़िया बंडल है।

2मेगाहवर (MegaHover) माउस ओवर इफेक्ट्स

मेगाहॉवर माउस ओवर इफेक्ट्स CSS3 छवि होवर प्रभाव का एक मजबूत बैच प्रदान करता है जो कि बूटस्ट्रैप 3 संगत है।

MegaHover Mouse Over Effects

यह भी है: 

  • फ़ॉन्ट विस्मयकारी आइकन का उपयोग करता है 
  • पार ब्राउज़र संगत 
  • पूरी तरह उत्तरदायी 
  • और अधिक 

आसानी से एकीकृत और संशोधित मेगाहोवर माउस ओवर इफेक्ट्स के सैकड़ों अच्छे दिखते हवर इफेक्ट्स में।

3Animatia - सीएसएस छवि हॉवर इफेक्ट्स

उपयोग करने के लिए आसान, न्यूनतम लोडिंग समय, उच्च अनुकूलन?  Animatia - सीएसएस छवि हॉवर प्रभाव इस और अधिक करता है।

Animatia - CSS Image Hover Effects

सीएसएस के इस बैच में शामिल हैं: 

  • 115 से अधिक उच्च अनुकूलन मंडराना प्रभाव 
  • पूरी तरह उत्तरदायी और आसानी से उपयोग फ़ाइलें 
  • शुद्ध CSS3 और फ़ॉन्ट विस्मयकारी आइकन 
  • और अधिक 

Animatia - सीएसएस छवि हॉवर इफेक्ट्स का बटन शैलियों, ओवरले प्रभाव, कैप्शन और अन्य सीएसएस एनिमेशन के लिए उपयोग करें।

4. हॉवर इफेक्ट्स फ्रेमवर्क

हॉवर इफेक्ट फ़्रेमवर्क एक बहुत ही सरल सीएसएस एनीमेशन समाधान हैI

Hover Effects Framework

साफ कोड, पूरी तरह उत्तरदायी, और:

  • IcoMoon अल्टमिट फ़ॉन्ट
  • 4 आकार और 5 रंग
  • 50+ एनिमेशन
  • और अधिक

हॉवर इफेक्ट फ़्रेमवर्क में साफ कोड है, और सबसे अच्छी बात यह है कि इसमें कुछ अच्छे दिखने वाली सीएसएस एनिमेशन के साथ शुरू करने के लिए बहुत सारे उदाहरण शामिल हैं।

5. प्रीलोडर्स का संग्रह

Preloaders का संग्रह प्राप्त करने के बाद आपको किसी अन्य संग्रह की ज़रूरत नहीं हो सकती।

Collection of Preloaders

आपको प्राप्त होगा:

  • आसान अनुकूलन के लिए उपयोग करने के लिए अच्छा प्रलेखन
  • CSS3 एनिमेशन का हल्का और लचीला सेट
  • 27 अद्वितीय प्रीलोडर्स 

पूरी तरह से मोबाइल के अनुकूल, प्रीलोडर्स का संग्रह किसी के भी CSS3 टूलबॉक्स में एक बढ़िया अतिरिक्त है।

6. CSS3 छवि हवर इफेक्ट्स

यदि आपने छवि होवर प्रभाव के लिए एक सीएसएस एनीमेशन देखा है, तो आपने उन्हें सब देखा है, है ना?

काफी नहीं।

CSS3 छवि हॉवर प्रभाव कुछ बहुत अच्छा और अनूठे प्रभाव भी शामिल हैं।

CSS3 Image Hover Effects

उसमे समाविष्ट हैं:

  • 22 विभिन्न CSS3 छवि मंडराना प्रभाव
  • पूरी तरह से भयानक और उत्तरदायी
  • स्वच्छ CSS3 कोड
  • और अधिक

बूटस्ट्रैप संगत CSS3 छवि हॉवर इफेक्ट्स देखें।

7. छवि हॉवर सीएसएस लाइब्रेरी

छवि हॉवर सीएसएस लाइब्रेरी एक स्केलेबल, लाइटवेट इमेज हॉवर सीएसएस ऐनिमेशन लाइब्रेरी है जो कि एक नज़र के लायक है।

Image Hover CSS LIbrary

यह 58 हॉवर इफेक्ट क्लासेस का एक उत्तम संग्रह है, जो केवल 25KB तक कम कर दिया गया है।

  • किसी भी मंडराना सामग्री के साथ काम करता है
  • अद्वितीय होवर प्रभाव
  • प्रयोग करने में आसान 
  • और अधिक

अन्य छवि हॉवर सीएसएस एनीमेशन से खुद को अलग करना मुश्किल है, लेकिन छवि हॉवर सीएसएस लाइब्रेरी ने इसे किया है।

8. एसवीजी लोगो स्क्रॉल एनीमेशन | CSS3 और जावास्क्रिप्ट

सामान्य सीएसएस ऐनिमेशन से छुटकारा पाना अच्छा है-छवि होवर प्रभाव- और एसवीजी लोगो स्क्रॉल एनिमेशन की तरह कुछ पर एक नज़र डालें | CSS3 और जावास्क्रिप्ट

SVG Logo Scroll Animation CSS3 and Javascript

सिर्फ 4k से कम में, यह कुछ सुंदर स्क्रॉल पेज एसवीजी एनिमेशन जोड़ता है।

एसवीजी लोगो स्क्रॉल एनीमेशन | CSS3 और जावास्क्रिप्ट के साथ कुछ सुंदर वेबपेज एनीमेशन बनाएं।

9. Viavi CSS3 स्क्रॉल प्रभाव

Viavi CSS3 स्क्रॉल प्रभाव एक बहुत अच्छी लग रही है CSS3 एचटीएमएल स्क्रॉल एनीमेशन समाधान है।

Viavi CSS3 Scroll Effects

कुछ विशेषताओं में शामिल हैं:

  • 16 सीएसएस 3 स्क्रॉल प्रभाव
  • सरल कार्यान्वयन
  • पूरी तरह रिस्पान्सिव 
  • और अधिक 

मोबाइल उपयोग के लिए सभी ग्रिड सिस्टम और टच-सक्षम का उपयोग करना, Viavi CSS3 स्क्रॉल इफेक्ट्स न केवल अच्छा लगती हैं, लेकिन यह भी अच्छी तरह से कार्यान्वित है।

10. CSS3 स्पिनर और लोडर

Gifs बिना लोडर की आवश्यकता है? 

कोई बात नहीं।  CSS3 स्पिनर और लोडर उद्धार।

CSS3 Spinners Loaders
  • 25 भिन्नताएं ढूंढें
  • अनुकूलित करने के लिए आसान
  • विस्तार करने में आसान

CSS3 स्पिनर और लोडर अच्छी तरह से प्रलेखित हैं और स्पिनरों और लोडर के लिए एक पूर्ण सीएसएस समाधान है।

11. मिडिक्स - jQuery के बिना CSS3 एनिमेशन प्रभाव

शुद्ध CSS3, मिडिक्स का उपयोग करना - jQuery के बिना CSS3 एनिमेशन प्रभाव 16 सीएसएस एनिमेशन का ठोस सेट वितरित करता है।

Midix - CSS3 Animation Effects without jQuery

आप समायोजित कर सकते हैं:

  • एनिमेशन गति
  • एनीमेशन विलम्ब
  • आइकन रंग

आपको न केवल मिडीक्स - बिना jQuery के CSS3 एनिमेशन प्रभाव के साथ सीएसएस ऐनिमेशन का एक अद्भुत संग्रह ही नहीं प्राप्त होगा, बल्कि मुफ्त अपडेट और मैत्रीपूर्ण समर्थन भी।

12. CSS3 हॉवर प्रभाव 

CSS3 के हॉवर प्रभाव एक और अच्छा विकल्प है।

CSS3 Hover Effects

आप आसानी से बदल सकते हैं:

  • रंग
  • सीमा आकार
  • चक्र को चौराहें
  • पाठ ब्लॉक के बीच अंतर

479 रेटिना आइकन और 20 अलग-अलग प्रभावों के साथ, CSS3 होवर इफेक्ट्स का उपयोग और उपयोग करने के लिए एक महान संसाधन है।

13. VSPreloader - अल्टमिट सीएसएस एनिमेटेड प्रीलोडर्स

जैसे ही एनिमेटेड प्रीलोडर्स जाते हैं, VSPreloader - अल्टमिट सीएसएस एनिमेटेड प्रीलोडर्स एक और अनोखी, रचनात्मक, और अच्छे दिखने वाले समाधानों में से एक हैं जिन्हें आप ढूंढने जा रहे हैं।

VSPreloader - Ultimate CSS Animated Preloaders

विशेषताओं में शामिल है:

  • 60 हेल्पर
  • 40 प्रस्तुत करता
  • 30 एनिमेशन
  • अल्टमैट रंग

यह अविश्वसनीय रूप से तेज और अद्वितीय है।

VSPreloader - अल्टमिट सीएसएस एनिमेटेड प्रीलोडर्स को एक करीब से देखो। मुझे लगता है कि आप प्रभावित होंगे।

14हीड - शुद्ध CSS3 एनिमेशन प्रभाव

ध्यान - शुद्ध CSS3 एनीमेशन प्रभाव सब कुछ प्रदान करता है जो आप सीएसएस एनिमेशन के संग्रह में चाहते हैं।

Heed - Pure CSS3 Animation Effects

SCSS (फ़ाइल शामिल) के साथ स्थापित करना, संपादित करना और कॉन्फ़िगर करना आसान है।

  • 20 सामग्री डिजाइन रंग विकल्प
  • फ़ॉन्ट विस्मयकारी आइकन
  • 15 प्रभाव
  • और अधिक

हीड - शुद्ध CSS3 एनीमेशन प्रभाव रेटिना के अनुकूल, मैत्रीपूर्ण समर्थन और निःशुल्क अपडेट शामिल हैं।

15. आयन - CSS3 लिंक हॉवर प्रभाव 

हालांकि अधिकांश सीएसएस ऐनिमेशन आपको छवियों और पृष्ठ प्रभावों पर ध्यान केंद्रित करते हैं, अयान - CSS3 लिंक हॉवर प्रभाव लिंक होवर प्रभावों का एक प्रभावशाली लाइनअप प्रदान करता है।

Ayan - CSS3 Link Hover Effects

आपको 30 महान दिखने वाले CSS3 लिंक होवर प्रभाव मिलेगा और:

  • ठोस ब्राउज़र संगतता
  • मदद दस्तावेज़
  • आधुनिक एनिमेशन
  • और अधिक

और अयान - CSS3 लिंक हॉवर प्रभाव बंडल, क्रिएटिव और तेज है, और सीएसएस एनिमेशन का बहुत अच्छा छूता है बिना अत्यधिक आकर्षक। 

16सिनिस्टर - शुद्ध सीएसएस छवि हॉवर प्रभाव

100 हॉवर प्रभावों पर घमंड, सिनिस्टर - शुद्ध सीएसएस छवि हॉवर प्रभाव अच्छी तरह से डिज़ाइन किए गए प्रभावों की एक प्रभावशाली संख्या प्रदान करता है।

Sinister - Pure CSS Image Hover Effects

इसके अलावा इसमें शामिल हैं: 

  • 22 सामग्री संक्रमण प्रभाव
  • 18 ओवरले संक्रमण प्रभाव 
  • 23 बटन संक्रमण प्रभाव 
  • 100 हॉवर प्रभाव 

जावास्क्रिप्ट या jQuery का उपयोग किए बिना, और शुद्ध सीएसएस का उपयोग कर, सिनिस्टर - शुद्ध सीएसएस छवि हॉवर प्रभाव प्रस्तुत करता है: 

  • ज़ूम-इन और ज़ूम-आउट 
  • X घुमाने और y घुमाएँ 
  • दाएं और बाएं घुमाए 
  • बारी बारी से और पैमाने पर 
  • घन ट्रैन्ज़िशन 
  • परत हॉवर 
  • और अधिक 

17. स्टाइलिश सोशल मीडिया एनिमेटेड आइकोन स्टाइल 

स्टाइलिश सोशल मीडिया एनिमेटेड आइकोन स्टाइल के साथ अपने सोशल मीडिया आइकन में कुछ अच्छे सीएसएस एनिमेशन जोड़ें। 

Stylish Social Media Animated Icons Style

चुनने के लिए एक साफ डिजाइन और नौ विभिन्न शैलियों के साथ, आप भी आनंद लेंगे: 

  • आसान कार्यान्वयन और अनुकूलन 
  • ठोस कोड आधार और प्रलेखन 
  • कोई छवि या आइकन निर्भरता नहीं 
  • क्रॉस-ब्राउज़र संगतता 
  • और अधिक 

स्टाइलिश सोशल मीडिया एनिमेटेड आइकोन स्टाइल आपके सोशल मीडिया आइकन लाइनअप के लिए रंग और सीएसएस एनीमेशन का अच्छा स्पर्श जोड़ता है।

18. CSS3 एनिमेशन

आसानी से अपने div, पी, और शरीर एनिमेशन एचटीएमएल CSS3 एनिमेशन के साथ।

CSS3 Animations

यह एक अच्छा स्निपेट है जिसका इस्तेमाल कई अलग-अलग डिज़ाइन स्थितियों में किया जा सकता है और लागू किया जा सकता है।

विशेषताओं में शामिल: 

  • उपयोग करने और अनुकूलित करने में आसान 
  • केवल CSS3, कोई जावास्क्रिप्ट नहीं 
  • 10+ एनिमेशन 

क्या आप अपने डिजाइन टूलबॉक्स में CSS3 एनिमेशन जोड़ेंगे? 

19. शुद्ध CSS3 छवि एडेरोडियन 

कुछ सुन्दर CSS एनिमेशन के लिए अपने स्वयं के स्लाइडर सेटअप या समान शुद्ध CSS3 छवि एडेरोड का उपयोग करें। 

Pure CSS3 Image Accordion

यह है: 

  • पूरी तरह उत्तरदायी 
  • कोई निश्चित चौड़ाई नहीं है 
  • चार कैप्शन विकल्प 
  • अनुकूलित करने के लिए आसान 

इस शुद्ध CSS3 छवि एडेरोडियन के साथ कुछ दृश्य संगीत बनाएं।

20. CSS3 मेगा टूलटिप एनिमेशन पैक

सरल टूलटिप्स से थक गये?

CSS3 मेगा टूलटिप एनीमेशन पैक का उपयोग करके कुछ सीएसएस एनिमेशन मैजिक जोड़ें।

CSS3 Mega Tooltip Animation Pack

इस सीएसएस एनिमेशन टूलटिप पैक में शामिल हैं:

  • 10 एनिमेशन प्रभाव
  • 8 रंग प्रीसेट
  • प्रलेखन (डाक्यूमेन्टैशन)
  • और अधिक 

CSS3 मेगा टूलटिप एनीमेशन पैक में एक इंटरनेट एक्सप्लोरर फ़ॉलबैक भी शामिल है।

निष्कर्ष

यहां तक कि बहुत सी सीएसएस एनीमेशन एनवाटो मार्किट (Envato Market) में उपलब्ध है, शायद आप अभी भी वह नहीं पाए हैं जो आप चाहते हैं।

कोई समस्या नहीं है। आप अपना खुद का बना सकते हैं!

Mastering CSS3 की तरह एनवाटो ईबुक (Envato eBooks) की जाँच करें, पेशकश कई अलग कोड पाठ्यक्रमों (code courses) में से एक ले, या एक प्रसिद्ध CSS3 कोड ट्यूटोरियल खोज और अनुसरण करें।

Advertisement
Advertisement
Advertisement
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.