यह पोस्ट CSS की मदद से ट्रांज़िशन सेट करने की विधि बताती है “ दिखाना ' और ' अस्पष्टता ' गुण।
CSS 'डिस्प्ले' और 'अस्पष्टता' गुणों को कैसे बदलें?
सीएसएस संक्रमण के लिए ' दिखाना ' और ' अस्पष्टता 'प्रॉपर्टी, पहले' के साथ एक डिव कंटेनर बनाएं <दिव> ' तत्व। फिर, div कंटेनर तक पहुंचें और 'की मदद से एक पृष्ठभूमि छवि जोड़ें' पृष्ठभूमि छवि ' संपत्ति। उसके बाद, 'सेट करें संक्रमण ”, “ अस्पष्टता ”, और अन्य आवश्यक गुण आपकी पसंद के अनुसार।
चरण 1: एक 'div' कंटेनर बनाएँ
प्रारंभ में, 'की सहायता से एक div कंटेनर बनाएं' <दिव> ”कंटेनर और एक विशेष नाम के साथ एक वर्ग विशेषता जोड़ें। ऐसा करने के लिए, हमने वर्ग का नाम 'के रूप में निर्धारित किया है' वस्तु ':
<डिव वर्ग = 'मुख्य वस्तु' > >
चरण 2: 'प्रदर्शन' संपत्ति सेट करें
अगला, वर्ग नाम का उपयोग करके div कंटेनर तक पहुँचें ' मुख्य वस्तु 'और सेट करें' दिखाना ' संपत्ति:
.मुख्य वस्तु {
दिखाना : अवरोध पैदा करना ;
}
यहाँ, का मूल्य ' दिखाना 'संपत्ति' के रूप में सेट है अवरोध पैदा करना ” स्क्रीन की पूरी चौड़ाई लेने के लिए।
चरण 3: पृष्ठभूमि छवि जोड़ें
अगला, एक्सेस किए गए div कंटेनर पर निम्न CSS गुण लागू करें:
.मुख्य वस्तु {ऊंचाई : 400 पीएक्स ;
चौड़ाई : 400 पीएक्स ;
पृष्ठभूमि छवि : यूआरएल ( वसंत-फूल.जेपीजी ) ;
अस्पष्टता : 0.1 ;
संक्रमण : अस्पष्टता 2s आसानी से बाहर ;
अंतर : 30 पीएक्स 50 पीएक्स ;
}
ऊपर बताए गए कोड स्निपेट में:
- ' ऊंचाई ' और ' चौड़ाई ' गुण परिभाषित तत्व का आकार निर्धारित करते हैं।
- ' पृष्ठभूमि छवि “CSS संपत्ति का उपयोग” की मदद से एक छवि डालने के लिए किया जाता है यूआरएल () ” तत्व के पीछे कार्य करता है।
- ' अस्पष्टता ' किसी तत्व के लिए अपारदर्शिता का स्तर निर्धारित करता है। अपारदर्शिता स्तर पारदर्शिता स्तर को प्रदर्शित करता है, जहां ' 1 'का उपयोग पारदर्शिता के लिए नहीं किया जाता है, और' 0.5 ' के लिए है ' पचास% 'पारदर्शिता।
- ' संक्रमण 'सीएसएस में उपयोगकर्ताओं को एक निश्चित अवधि में संपत्ति मूल्यों को आसानी से बदलने की अनुमति देता है।
- ' अंतर 'एक तत्व के चारों ओर परिभाषित सीमा के बाहर की जगह को परिभाषित करता है।
उत्पादन
चरण 4: छद्म चयनकर्ता 'होवर' लागू करें
अब, div कंटेनर को '' के साथ एक्सेस करें : होवर “छद्म चयनकर्ता जिसका उपयोग तत्वों के चयन के लिए किया जाता है जब हम उनके ऊपर माउस घुमाते हैं:
.मुख्य वस्तु : मंडराना {अस्पष्टता : 1 ;
}
फिर, 'सेट करें अस्पष्टता 'चयनित तत्व के रूप में' 1 'पारदर्शिता को दूर करने के लिए।
उत्पादन
संक्रमण CSS 'प्रदर्शन' और 'अस्पष्टता' गुणों को सेट करने के बारे में यह सब कुछ है।
निष्कर्ष
संक्रमण 'प्रदर्शन' और 'अस्पष्टता' गुणों को सेट करने के लिए, पहले