38 प्रेरणादायक CSS3 एनीमेशन डेमो

CSS3 की शुरुआत के बाद से, वास्तव में बहुत सारी गर्म बहसें इसकी संभावनाओं और उपयोगिता के इर्द-गिर्द घूमती हैं। हालांकि, इसकी क्षमता का पता लगाने के लिए कई दिलचस्प प्रयोग हाथ से तैयार किए गए हैं। यद्यपि किसी भी माध्यम से किए गए प्रयोग CSS3 की उपयोगिता साबित नहीं करते हैं, लेकिन उन्होंने वास्तव में CSS3 की वास्तविक संभावनाओं को एक हद तक दर्शाया है कि प्रमुख डेवलपर्स का मानना है कि CSS3 भविष्य है.

क्या यह सच है? इसे अपनी आंखों से देखें। इस शोकेस में हम सिर्फ और सिर्फ कुछ नहीं दिखाने वाले हैं 38 प्रेरक CSS3- आधारित एनीमेशन डेमो विशुद्ध रूप से CSS3 की वास्तविक क्षमता का पता चलता है। शुद्ध प्रयोगों के अलावा, आप कुछ व्यावहारिक उदाहरण भी देखेंगे कि कैसे CSS3 को इसे और अधिक मधुर और कामुक बनाने के लिए वेब डिज़ाइन में लागू किया जा सकता है.

पर्याप्त ने कहा, हमें CSS3 की शानदार दुनिया का पता लगाने दें!

इसमें आपकी भी रुचि हो सकती है:

CSS3 के लिए शुरुआती गाइड
एक रॉकिंग CSS3 खोज बॉक्स बनाना
HTML5 / CSS3 वेबपृष्ठों का निर्माण
CSS3 में ग्रेसफुल ब्रेडक्रंब नेविगेशन मेनू
एक अजाक्स-आधारित HTML5 / CSS3 संपर्क फ़ॉर्म बनाएँ
CSS3 के साथ विशुद्ध रूप से निर्मित 35 ग्राफिक्स
अधिक…

Google क्रोम के सफारी या डेवलपर संस्करण के नवीनतम संस्करण का उपयोग करके इन डेमो को देखने के लिए आपको दृढ़ता से अनुशंसा की जाती है। हालांकि अधिकांश डेमो फ़ायरफ़ॉक्स और Google क्रोम के नवीनतम संस्करण का समर्थन करते हैं.

एनिमेटेड 3 डी हेलिक्स

सूची में सबसे पहले एक अविश्वसनीय एनीमेशन है, जो Marcofolio.net द्वारा बनाया गया है, CSS3 3 डी का उपयोग करके। एनीमेशन खुद जादू जैसा दिखता है, लेकिन आप वास्तव में लेख में ट्यूटोरियल के साथ समान प्रभाव बनाना सीख सकते हैं!

एनिमेटेड बटन

वेब डिजाइनर के लिए एक देखना होगा, क्योंकि डेमो न केवल CSS3 एनीमेशन की संभावनाओं को दर्शाता है, बल्कि प्रेरणा के लिए बहुत अच्छा और व्यावहारिक बटन प्रभाव भी प्रदान करता है!

एनिमेशन मेंस

वास्तव में शांत और रचनात्मक दिखने के लिए अपने एनीमेशन मेनू को मसाला देने की कोशिश कर रहे हैं? यह डेमो आपके लिए है.

एटी-एटी वाकर

एक प्रेरक एनीमेशन डेमो, जो बॉडी पार्ट्स के साथ एक यूनिट को एनिमेट करने पर CSS3 की क्षमता को दर्शाता है.

युद्धक्षेत्र CSS3

बहुत सारे विस्फोट और गोलियों के साथ युद्धक्षेत्र CSS3!

बड़ी बात

यह सहज और अच्छा एनीमेशन है जिसने इस डेमो को एक बड़ा सौदा बना दिया है.

कैन हज़ उर कर्सर?

“नमस्ते, मैं कर्सर राक्षस हूँ। मेरे पापा के पास आपके लिए एक संदेश है: 'कृपया, उपयोग न करें कर्सर: कोई नहीं, सिवाय इसके कि क्या आप राक्षस खाने वाले कर्सर को बनाते हैं '.”

सीएसएस डॉक

मैक ओएस एक्स के गोदी की नकल करते हुए एक सेक्सी प्रयोग, और यह वास्तव में चिकनी है.

CSS3 मैन

बाहर देखो, यहाँ CSS3 आदमी आता है! CSS3 एनीमेशन की वास्तविक क्षमता दिखाने के लिए सही उदाहरण.

ड्रिबल बॉल बाउंसिंग

ग्राफिक ट्रिक्स के कम इस्तेमाल से CSS3 का एनीमेशन अच्छा और मनोरंजक हो जाता है.

दुल्ला

डुल्ला बहुत अधिक सामान्य तकनीकों में से एक को दर्शाता है जिसका उपयोग 2D platformer गेम बनाने के लिए किया जाता है, जो अब CSS3 के साथ भी संभव है.

फ़्रेम एनीमेशन द्वारा फ़्रेम

CSS3 के साथ फ्रेम एनीमेशन द्वारा फ़्रेम? कोई बात नहीं!

ग्राफ एनीमेशन

अपनी साइट में ग्राफ़ को दिखाने / समझाने के लिए एक सरल लेकिन शक्तिशाली एनीमेशन, इसे बनाना सीखें!

उच्च

एक रहस्यमय संगीत एनीमेशन जो वास्तविक समय में गतिशील रूप से Google खोज से छवियां प्रदर्शित करता है, और प्रदर्शित छवियां गीत के बोल पर आधारित होती हैं.

हॉवर प्रभाव

होवर प्रभाव का भविष्य CSS3 के साथ आता है। चिकना और होनहार.

आई एम जोसेफ बैरेट

CSS3 पोर्टफोलियो साइट के सोशल मीडिया आइकन में एकीकृत है। यह न केवल मजेदार है बल्कि डिजाइनर की रचनात्मकता को भी दिखा रहा है.

अनंत ज़ूम

चिकनी एनीमेशन, अपने पोर्टफोलियो को दिखाने का एक अच्छा तरीका भी है। 26 छवियों के लिए कुल ज़ूम 67108864: 1 है.

Kinect और CSS3

“14 शरीर के जोड़ों को ट्रैक किया जाता है और Xbox Kinect का उपयोग करके एक छोटी सीएसएस एनीमेशन में परिवर्तित किया जाता है। शरीर के डेटा को ब्राउज़र में लाया जाता है, जहां पार्स किया जाता है और CSSitable.com के साथ CSS एनिमेशन में परिवर्तित किया जाता है.”

मैट्रिक्स

मैट्रिक्स के रूप में शांत होना चाहते हैं? CSS3 के साथ आप इसे बनाने में सक्षम हैं.

मॉर्फिंग क्यूब्स

3 डी ट्रांसफ़ॉर्मेशन, एनिमेशन और संक्रमण का उपयोग करके सीएसएस 3 की खोज करने वाला प्रायोगिक डेमो। यहां दिलचस्प हिस्सा यह है कि आप अभी भी तत्वों पर पाठ का चयन कर सकते हैं, तब भी जब वे अभी भी घूम रहे हैं.

हमारा सौर मंडल

छात्रों को अब सौर प्रणाली का पता लगाने में मदद करने के लिए आपको महंगे स्टैंडअलोन सॉफ़्टवेयर की आवश्यकता नहीं है.

डफ रोल

“मम्मम… .होमर बीयर की कभी न खत्म होने वाली सप्लाई को पसंद करेगा.”

पोस्टर सर्कल

दिलचस्प प्रभाव प्राप्त करने के लिए सीएसएस परिवर्तन और एनीमेशन का उपयोग करने का तरीका दिखाने पर एक सरल लेकिन दिलचस्प उदाहरण.

आदरणीय खतरे

जो वास्तव में प्यारे पात्रों और मनोरंजक एनिमेशन वाली वेबसाइट का विरोध कर सकता है?

Rofox

सहज और मजेदार एनीमेशन, अपने दम पर कोशिश करने के लिए स्रोत कोड प्राप्त करें!

शान द शीप

“हार्डवेयर और त्वरित HTML5 वीडियो, 3 डी सीएसएस ट्रांसफ़ॉर्म और वेबएम के साथ बनाए गए एक इंटरैक्टिव प्रयोग के माध्यम से शॉन और उनके दोस्तों की हरकतों को 'एन इल विंड', 'स्नोल्ड इन', 'द बिग चेज़' और 'ट्वोस कंपनी' से क्लिप में देखें।.”

अंतरिक्ष

शायद अंतरिक्ष CSS3 के लिए अंतिम सीमा है.

अंतरिक्ष CaCSS

इस तरह जादुई प्रभाव बनाएँ CSS3 के साथ वास्तव में कठिन नहीं है, क्योंकि मुख्य रूप से बस हैं दोहरा-रेडियल-ढाल तथा पृष्ठभूमि आकार शामिल। विविधताएं उचित मात्रा में ट्विक के साथ संभव हैं.

स्टार वार्स क्रॉल

स्टार वार्स खोलने का क्रॉल प्रभाव! बस CSS3 के रूप में महाकाव्य.

द एक्सप्रेसिव वेब

अभिव्यंजक वेब न केवल आपको CSS3 और उसके ब्राउज़र समर्थन, संदर्भ और दस्तावेज़ीकरण के बारे में बताता है, बल्कि इसके वेब पेज पर एक मन उड़ाने वाले CSS3 एनीमेशन को भी प्रदर्शित करता है।.

पत्र-प्रमुख

मानव के चेहरे की तरह दिखने वाली छाया बनाने के लिए प्रकारों का उपयोग करना, जिन्होंने सोचा था कि यह CSS3 के साथ संभव होगा?

द मैन फ्रॉम हॉलीवुड

कभी उन प्यारे एनिमेशनों को सिर्फ शुद्ध टाइपोग्राफी का उपयोग करते हुए देखा है? ठीक है, आप इसे CSS3 के साथ भी कर सकते हैं.

तारामंडल

बस विवरण के साथ तारामंडल की खोज पर महाकाव्य डेमो। एसवीजी, जावास्क्रिप्ट, एचटीएमएल 5, सीएसएस 3, फोंट और प्रकार शामिल हैं.

बारिश के प्रकार

“आज के लिए पूर्वानुमान, मान लें कि आप एक आधुनिक ब्राउज़र का उपयोग कर रहे हैं, बादल छाए रहेंगे, जॉर्जिया की बारिश की 100% संभावना है.”

टाइपोग्राफी प्रभाव

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

एंड्रयू होयर के साथ चलना

सबसे अच्छा, आप लेख में एंड्रयू होयर के साथ चलना भी सीख सकते हैं!

वेबकिट आश्चर्य है

जावास्क्रिप्ट मैट्रिक्स पुस्तकालय के साथ CSS3 3 डी परिवर्तनों का एक अद्भुत उपयोग। तकनीकी लगता है, लेकिन परिणाम बहुत अच्छा है.

Zoetrope

जब Zoetrope इसके साथ संभव हो तो आप CSS3 के साथ और क्या नहीं कर सकते?

प्रतिबिंब

प्रेरणादायक? हाँ. प्रैक्टिकल? शायद. एनीमेशन तकनीक हमेशा डेवलपर और एनिमेटर के लिए एक सिर-खरोंच विषय है क्योंकि इसे वास्तव में चिकनी, अद्वितीय और स्टाइलिश एनीमेशन का उत्पादन करने के लिए ज्ञान के कुछ निश्चित स्तर की आवश्यकता होती है। जबकि CSS3 में एनीमेशन करने की संभावना है, इसका मतलब यह नहीं है कि यह एनीमेशन के लिए एक उपयुक्त उपकरण है। मुझे लगता है कि आखिरकार यह अभी भी आपकी पसंद के बारे में है, जैसा कि मेरे लिए है, मैं दोनों के साथ ठीक हूं, जब तक टूल परियोजना की जरूरतों के अनुरूप है.

इन CSS3 एनिमेशन के बारे में आपका क्या विचार है? क्या ये CSS3 एनिमेशन केवल प्रयोगों के रूप में अच्छे हैं, या उन्हें वास्तविक जीवन वेब डिज़ाइन में भी लागू किया जा सकता है? हमेशा की तरह, हम इस विषय पर आपके अनमोल विचार का स्वागत करते हैं, और हमें CSS3 एनीमेशन के अपने पसंदीदा टुकड़े के बारे में भी बताते हैं!

अधिक

बस दिखावा, सच में? आप और अधिक पाने के योग्य हैं! नीचे आप के लिए Hongkiat से CSS3 के ट्यूटोरियल और गाइड नीचे दिए गए हैं, उन्हें तलाशने का एक अच्छा समय है!