एक वेब पेज में एनिमेशन अधिक उपयोगकर्ताओं को आकर्षित कर सकते हैं। अपने आप से यह पूछें - यदि आप एक वेब पेज देखना चाहते हैं, जिसमें काफी एनीमेशन हैं, तो क्या आप और अधिक जानकारी प्राप्त नहीं करना चाहेंगे? अब, CSS बदलावों से आप अपने काम को कुछ बेहतरीन एनिमेशन के साथ जीवंत बना सकते हैं। और, तुम मन, इन सही किया जाना चाहिए। आइए निम्नलिखित क्रम में CSS बदलावों की दुनिया का अन्वेषण करें:
- सीएसएस संक्रमण क्यों?
- संक्रमण संपत्ति
- आपको क्या निर्दिष्ट करने की आवश्यकता है?
- संक्रमण-समय-फ़ंक्शन-फ़ंक्शन फ़ंक्शन गुण
- संक्रमण-विलंब संपत्ति
सीएसएस संक्रमण क्यों?
एक उदाहरण लेते हैं। यदि आप एक तत्व का रंग सफेद से नीले रंग में बदलना चाहते हैं, तो यह परिवर्तन लगभग तात्कालिक है। अधिक एनिमेटेड प्रभाव के लिए, आप यह परिवर्तन धीरे-धीरे कर सकते हैं। यह देखने में भी काफी आकर्षक लगता है। CSS बदलावों को सक्षम करके, आप परिवर्तनों को होने वाले तरीके को अनुकूलित कर सकते हैं। आप परिभाषित कर सकते हैं कि विशिष्ट समय अंतराल पर तत्वों में परिवर्तन कैसे होते हैं जो त्वरण वक्र का अनुसरण करते हैं।
सीएसएस संक्रमण आपको परिवर्तनों को परिभाषित करने देता है तत्वों, विशिष्ट समय अंतराल, त्वरण वक्र की गति और बहुत कुछ। आप यह सब फ़्लैश का उपयोग किए बिना या कर सकते हैं जावास्क्रिप्ट ।
बेहतर समझ के लिए, आप नीचे दी गई छवि को देख सकते हैं:
ऊपर की छवि में, HTML तत्व एक सेकंड के मामले में लाल से नीले रंग में बदल जाएगा। जब संक्रमण हो रहा हो तब आप मध्यवर्ती रंग भी देखेंगे। यदि आप CSS बदलावों का उपयोग करने नहीं जा रहे हैं, तो आप देखेंगे कि लाल से नीले रंग में परिवर्तन तत्काल है - आप मध्यवर्ती रंग नहीं देखेंगे। सीएसएस संक्रमण के साथ, आप एक एनिमेटेड प्रभाव देखेंगे जब HTML तत्व पुराने राज्य से नए एक में बदल रहे हैं।
संक्रमण संपत्ति
आप CSS संक्रमण को नियंत्रित करने के लिए आशुलिपि संक्रमण संपत्ति का उपयोग कर सकते हैं। इस आशुलिपि का उपयोग न केवल आसान है, बल्कि यह आउट-ऑफ-सिंक मापदंडों से भी बच सकता है जो सीएसएस में डिबग करने के लिए काफी निराशाजनक हो सकता है।
संक्रमण-गुण CSS गुणों को निर्दिष्ट करता है जिससे आप संक्रमण प्रभाव चाहते हैं। केवल ये सीएसएस गुण एनिमेटेड हैं।
वाक्य - विन्यास:
संक्रमण:
एक शुरुआत के रूप में, आपको शॉर्टहैंड का उपयोग करने में कुछ कठिनाइयों का सामना करना पड़ सकता है। यदि आपको लगता है कि शॉर्टहैंड का उपयोग करना अभी आपके लिए थोड़ा जटिल है, तो आप संक्रमण गुणों को अलग से निर्दिष्ट कर सकते हैं। HTML तत्व के लिए, आप नीचे दिए गए उदाहरण में एक-एक करके संक्रमण गुण निर्दिष्ट कर सकते हैं:
div {चौड़ाई: 100px ऊंचाई: 100px पृष्ठभूमि: lightblue संक्रमण-संपत्ति: चौड़ाई संक्रमण-अवधि: 2s संक्रमण-समय-कार्य: रैखिक संक्रमण-देरी: 1s} div: होवर {चौड़ाई: 300px}बॉक्स पर होवर करें
उपरोक्त उदाहरण में, हमने गुणों (संक्रमण-संपत्ति, संक्रमण-अवधि, संक्रमण-समय-फ़ंक्शन और संक्रमण-विलंब) और उनके मूल्यों को अलग-अलग निर्दिष्ट किया है। हम जल्द ही इन संक्रमण गुणों के बारे में जानेंगे।
आपको क्या निर्दिष्ट करने की आवश्यकता है?
मुख्य रूप से दो चीजें हैं जिन्हें आपको सीएसएस संक्रमण बनाने के लिए निर्दिष्ट करने की आवश्यकता है: सीएसएस संपत्ति जो एक प्रभाव जोड़ना चाहती है, और उस प्रभाव की समय अवधि।आपको एक बात ध्यान में रखने की आवश्यकता है - जब आप समय अवधि को निर्दिष्ट नहीं करते हैं, तो संक्रमण का डिफ़ॉल्ट मान होगा ० , और वहाँ कोई प्रभाव नहीं पड़ेगा।
आइए एक उदाहरण पर विचार करें:
नीचे दिया गया कोड पांच सेकंड की अवधि के लिए चौड़ाई की संपत्ति के एक संक्रमण प्रभाव को परिभाषित करता है।
div {चौड़ाई: 100px ऊंचाई: 100px पृष्ठभूमि: नीला संक्रमण: चौड़ाई 5s} div: मंडराना {चौड़ाई: 600px}संक्रमण प्रभाव देखने के लिए, ऊपर दीवान तत्व पर कर्सर ले जाएँ।
उपरोक्त कोड में, आप देखेंगे कि जब आप अपने कर्सर को नीले बॉक्स पर घुमाते हैं, तो नीले बॉक्स की चौड़ाई धीरे-धीरे पाँच सेकंड की अवधि के लिए बढ़ जाती है। आप यह भी देखेंगे कि जब आप नीले बॉक्स से कर्सर निकालते हैं, तो नीले बॉक्स धीरे-धीरे अपने मूल आकार में लौट आएगा (तुरंत नहीं)। आप यह देखने के लिए कि यह संक्रमण गुण HTML तत्व को कैसे प्रभावित करता है, चौड़ाई और समय अवधि के लिए मान भी बदल सकते हैं।
आप संक्रमण प्रभाव को एक से अधिक संपत्ति में भी जोड़ सकते हैं। आप संपत्तियों को अलग करने के लिए अल्पविराम का उपयोग करके ऐसा कर सकते हैं। आइए एक उदाहरण पर विचार करें:
नीचे दिए गए कोड में, संक्रमण गुण चौड़ाई, ऊंचाई और परिवर्तन के लिए निर्दिष्ट किया गया है।
div {गद्दी: 15px चौड़ाई: 150px ऊँचाई: 100px ऊँचाई: हरे रंग का संक्रमण: चौड़ाई 2s, ऊँचाई 2s, ऊँचाई 2s, रूपांतरण 2s} div: होवर {चौड़ाई: 300px ऊँचाई: 200px परिवर्तन: घुमाएँ (360deg)} नमस्ते दुनिया (मेरे ऊपर मंडराना)
उपरोक्त उदाहरण के साथ, आप देखेंगे कि जब आप बॉक्स पर मंडराते हैं तो हरे रंग का बॉक्स कैसे चलता है।
कैसे जावा में एक सरणी को गतिशील रूप से आवंटित करें
हमने केवल संपत्ति और समय अवधि निर्दिष्ट की है। आइए विभिन्न उदाहरणों के साथ अन्य मापदंडों को देखें।
संक्रमण-समय-फ़ंक्शन-फ़ंक्शन फ़ंक्शन गुण
यह गुण संक्रमण प्रभाव के लिए गति वक्र को परिभाषित करता है। यह निम्नलिखित मान ले सकता है:
- आसानी मूल्य: यह डिफ़ॉल्ट मान है जहां प्रभाव शुरुआत में धीमा है, फिर तेजी से और धीरे-धीरे समाप्त होता है।
- रैखिक मूल्य: यह प्रभाव संक्रमण की गति को अलग नहीं करता है - यह शुरू से अंत तक गति को सुसंगत रखता है।
- आसानी से मूल्य: यह प्रभाव धीरे-धीरे शुरू होता है।
- आसानी से बाहर मूल्य: इस प्रभाव का एक धीमा अंत है।
- आसानी से बाहर मूल्य: इस प्रभाव की धीमी शुरुआत के साथ-साथ धीमी गति भी है।
- घन-बेज़ियर मान (n, n, n, n): आप क्यूबिक-बेज़ियर फ़ंक्शन में अपने स्वयं के मान निर्दिष्ट कर सकते हैं।
नीचे दिया गया कोड रैखिक, सहजता, सहजता, सहजता और सहजता के मूल्यों के लिए संक्रमण प्रभाव दिखाता है।
div {चौड़ाई: 100px ऊंचाई: 100px पृष्ठभूमि: गुलाबी संक्रमण: चौड़ाई 2s} # div1 {संक्रमण-समय-कार्य: रैखिक} # div2 {संक्रमण-समय-कार्य: आसानी} # div3 {संक्रमण-समय-समारोह: आसानी से } # div4 {संक्रमण-समय-कार्य: आसानी से बाहर} # div5 {संक्रमण-समय-समारोह: आसानी से बाहर} div: मंडराना {चौड़ाई: 300px}नीचे दिए गए दिव्य तत्वों पर होवर करें
रेखीय
सहजता
आराम से
आराम करो
आसानी से अंदर-बाहर
संक्रमण-विलंब संपत्ति
कभी-कभी, आप एक निश्चित समय अवधि के बाद एक एनीमेशन चाहते हैं। संक्रमण-विलंब संपत्ति आपको संक्रमण प्रभाव के लिए देरी निर्दिष्ट करने देती है। आप सेकंड में देरी निर्दिष्ट कर सकते हैं।
संक्रमण प्रभाव में देरी को देखने के लिए एक उदाहरण लेते हैं:
div {चौड़ाई: 100px ऊंचाई: 100px पृष्ठभूमि: पीला संक्रमण: चौड़ाई 3s संक्रमण-विलंब: 1s} div: होवर {चौड़ाई: 300px}नीचे दिव्य तत्व पर होवर करें
ध्यान दें: आप प्रभाव शुरू होने से पहले 1 सेकंड की देरी का पालन कर सकते हैं
उपरोक्त कोड में, जब आप अपने कर्सर के साथ पीले बॉक्स पर होवर करते हैं, तो आप देखेंगे (एक सेकंड के लिए) कि कोई प्रभाव नहीं है। एक सेकंड के इंतजार के बाद, आप प्रभाव को नोटिस करेंगे।
इसके साथ, हम इस CSS संक्रमण लेख के अंत में आते हैं। अब आप अपने वेबपेजों में एनिमेशन जोड़ सकते हैं। इन उदाहरणों को आज़माएं।
हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।
क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'सीएसएस संक्रमण' ब्लॉग के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।