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

Codepen-कोड पेन पे CSS-सीएसएस एनीमेशन के १५ प्रेरणादायी उदाहरण

by
Length:LongLanguages:

Hindi (हिंदी) translation by Dee.P.Tree (you can also view the original English article)

CodePen-कोडपेन हम हमारे वेब के निर्माणों से क्या क्या कर सकते हैं यह प्रदर्शित करने के लिए जल्दी से विश्वसनीय स्थान बन रहा है। हाल में लोग CSS एनीमेशन से जो बेहतरीन चीजें बना रहे हैं उसमे से कुछ की सूचि ये रही!

१. JavaScript Mickey Watch-जावास्क्रिप्ट मिकी वॉच-जावास्क्रिप्ट से मिकी की घडी

Apple watch like Mickey watch-एप्पल वॉच लिखे मिकी वॉच-मिकी की घडी की तरह एप्पल घडी, Jay Salvat-जय सल्वट (@jaysalvat) के द्वारा।

यह एक आकर्षक Mickey Mouse-मिकी माउस के हाथों को घडी के ऊपरी भाग में स्थापित करने के लिए CSS transitions-सीएसएस ट्रांसिशन्स, SVG graphics-एसवीजी ग्राफ़िक्स और JavaScript-जावास्क्रिप्ट के संयोजन का एक प्यारा उदाहरण है।

२. CSS Submarine-सीएसएस सबमरीन-सीएसएस पनडुब्बी

Submarine with CSS-सबमरीन विथ सीएसएस-सीएसएस से पनडुब्बी, Alberto Jerez-अल्बर्टो जेरेज़ (@ajerez) के द्वारा।  

गोल छेद आकार के पात्र का शानदार प्रयोग यह CSS-सीएसएस-एनिमेटेड पनडुब्बी को बहुत सुंदरता प्रदान करता है।

३. ASCII AT-AT-आस्की एटी-एटी

AT-AT-एटी एटी, Tim Pietrusky-टीम पिट्रस्कि (@TimPietrusky) के द्वारा।

Star Wars-स्टार वॉर्स से प्रेरित AT-AT व्यक्तिगत वाहक, टेक्स्ट-पाठ के साथ CSS-सीएसएस में पुनरावर्तित किए हुए रंगों का प्रयोग करके चित्रित किया हुआ। एक फंकी इफ़ेक्ट-मजेदार दृश्य प्रभाव।

४. SVG/CSS Loader-एसवीजी/सीएसएस लोडर 

Loader SVG/CSS-लोडर एसवीजी/सीएसएस, Bidji-बिडजी (@Bidji) के द्वारा।

यह लोडर-जब कंप्यूटर पे कोई प्रक्रिया चल रही है वह दर्शाने का दार्शनिक तरीका, घूमता हुआ हो ऐसा आभास देने के लिए बदलते रंगों का प्रयोग करता है।

५. 3D CSS Tardis-३डी सीएसएस टार्डिस-त्रि-परिमाणिय सीएसएस टार्डिस

3D CSS Tardis-३डी सीएसएस टार्डिस-त्रि-परिमाणिय सीएसएस टार्डिस, Gerwin van Royen-जर्विन वान रोयेन (@Gerwinnz) के द्वारा।

CSS-सीएसएस कुछ अद्भुत ३डी इफेक्ट्स-दृश्यप्रभावों को बनाने के लिए प्रयोग में लिया जा सकता है। ये रहा एक ३डी टार्डिस-समय यात्रा करने का काल्पनिक यन्त्र:

६. Dozing Bird-डोज़िंग बर्ड-तंद्रामय पक्षी

Dozing Bird-डोज़िंग बर्ड-तंद्रामय पक्षी, Peter Klein-पीटर क्लेइन (@pmk) के द्वारा। 

सादी कला की शैली और अति उचित मात्रा में एनीमेशन इस निंद्रामय पक्षी को जीवन का आभास देता है।

७. Pure CSS border animation-प्योर सीएसएस बॉर्डर एनीमेशन-शुद्ध सीएसएस सीमा का एनीमेशन

Pure CSS border animation without SVG-प्योर सीएसएस बॉर्डर एनीमेशन विथाउट एसवीजी-एसवीजी के बगैर शुद्ध सीएसएस सिमा का एनीमेशन, Rplus-आरप्लस (@rplus) के द्वारा।

लोडिंग का स्टाइल एनीमेशन तैयार करने के लिए CSS-सीएसएस का सीधा-सादा लेकिन फिर भी बहुत असरकारक प्रयोग। 

८. Star Wars: The Force Awakens-स्टार वार्स: धी फाॅर्स अवेकन्स

Star Wars: The Force Awakens-स्टार वार्स: धी फाॅर्स अवेकन्स CSS-सीएसएस में, Donovan Hutchinson-डोनोवान हचिसन (@donovanh) के द्वारा।

CSS-सीएसएस, HTML-एचटीएमएल और थोड़ी सी JavaScript-जावास्क्रिप्ट का प्रयोग करके आनेवाली Star Wars-स्टार वॉर्स की मूवी-चलचित्र से शीर्षक।

९. 3D Synth-३डी सिन्थ-त्रि-परिमाणिय सिन्थ

Pure CSS 3D Synthesizer (mousedown for rotation)-प्योर सीएसएस ३डी सिंथेसाइज़र (माउस डाउन फॉर रोटेशन)-शुद्ध सीएसएस त्रि-परिमाणिय सीन्थेसाइज़र (घुमाने के लिए माउस को निचे की तरफ लें), Nikolay Talanov-निकोले तालानोव (@suez) के द्वारा।

CSS-सीएसएस का प्रयोग करके बनाया गया यह ३डी सीन्थ को घुमाकर उसकी keys-कीज़-कुंजिओं से बजने का प्रयास करें। अद्भुत काम:

१०. Cascading Solar System-कैस्केडिंग सोलर सिस्टम-व्यापक हो रहा सौर मंडल

Cascading Solar System!-कैस्केडिंग सोलर सिस्टम!-व्यापक हो रहा सौर मंडल!, Tady Walsh-टेडी वॉल्श (@tadywankenobi) के द्वारा।

हमारे सौर मंडल का प्रतिरूप, मापन की हुई घूमने की गति से पूर्ण, हर एक ज्यादा बड़े ग्रहों के चंद्रों और विवरण। सूर्य वास्तविक पदार्थ का जिवंत अभिग्रहण-कैप्चर ही है!

११. 3D Solar System-३डी सोलर सिस्टम-त्रि-परिमाणिय सौर मंडल

Full CSS 3D Solar System-फुल सीएसएस ३डी सोलर सिस्टम- पूरा सीएसएस त्रि-परिमाणिय सौर मंडल,  Wayne Dunkley-वैन डंकली (@waynedunkley) के द्वारा।

अन्य सौर मंडल, लेकिन इस बार ३डी-त्रि-परिमाण में। शेडिंग-छायाकाम का सुन्दर प्रयोग।

१२. Flat Design Camera-फ्लैट डिज़ाइन कैमरा-समतल डिज़ाइन कैमरा

Flat design camera with CSS animation-फ्लैट डिज़ाइन कैमरा विथ सीएसएस एनीमेशन-सीएसएस एनीमेशन के साथ समतल डिज़ाइन कैमरा, Damien Pereira Morberto-डेमिन पेरिरा मोर्बेर्तो (@damienpm) के द्वारा।

वह CSS-सीएसएस एनीमेशन का प्रयोग करके तस्वीर तैयार करता हुआ देखने के लिए इस फ्लैट-समतल कैमरा पे shutter-शटर दबाएं।

१३. Day and Night Transition-डे एंड नाईट ट्रांजीशन-दिन और रात की संक्रांति

Day Night simulation-डे नाईट सिम्युलेशन-दिन रात का अनुकरण, Szymon Stypa-सिमोन टीपा (@Catagen) के द्वारा।

दिन को रात में रूपांतरित करने के लिए बटन दबाएं।

१४. Animated Sprite with CSS-एनिमेटेड स्प्राइट विथ सीएसएस-एनिमेटेड स्प्राइट सीएसएस के साथ

Animate sprite with CSS-एनिमेट स्प्राइट विथ सीएसएस-सीएसएस के साथ स्प्राइट को एनिमेट करें, Avaz Bokiev-एवज़ बोकिव (@samarkandiy) के द्वारा।

Stop-motion-स्टॉप-मोशन एनीमेशन तैयार करने के लिए एक तस्वीरों की श्रेणी (स्प्राइट) का प्रयोग कैसे किया जा सकता है उसका प्रदर्शन, पूरा आगे और वापिस पीछे बढ़ती गति के साथ।

१५. Dodecahedron-डोडेकाहेड्रॉन-द्वादशफ़लक

Dodecahedron-डोडेकाहेड्रॉन-द्वादशफ़लक, wontem-वोन्टेम (@wontem) के द्वारा।

CSS-सीएसएस से पूरी तरह तैयार किया गया और एनिमेट किया गया एक हल्का, सुन्दर द्वादशफ़लक।

समापन

कुछ समय पहले, हम ब्राउज़र में कोई भी एनीमेशन के लिए Flash-फ़्लैश या JavaScript-जावास्क्रिप्ट के संसाधनों की ओर झुक गए होते। आधुनिक ब्राउज़र CSS-सीएसएस के लिए बेहतर समर्थन दे रहें हैं, हार्डवेयर एक्सेलरेटेड ३डी और एनीमेशन के साथ।

CodePen-कॉडपेन जैसी साइट की बदौलत, हम पहले से बहुत आसानी से आदान-प्रदान कर सकते हैं और सिख सकते हैं। ऐसे कौन से कुछ सबसे ज्यादा प्रेरणादायी एनीमेशन के प्रदर्शन आपने अभी कुछ समय में देखे हैं?

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.