यह पोस्ट इस बात की जांच करेगी कि CSS डिस्प्ले प्रॉपर्टी का उपयोग करके ट्रांज़िशन कैसे लागू करें।
CSS “डिस्प्ले” प्रॉपर्टी पर ट्रांज़िशन कैसे लागू करें?
उपयोगकर्ता सीधे CSS पर ट्रांज़िशन लागू नहीं कर सकते” दिखाना ' संपत्ति। हालाँकि, प्रदर्शन संपत्ति पर संक्रमण लागू करने का एक वैकल्पिक तरीका है। इस प्रयोजन के लिए, नीचे उल्लिखित प्रक्रिया से गुजरें।
चरण 1: एक '' कंटेनर बनाएं
सबसे पहले, 'का उपयोग करके एक div कंटेनर बनाएं' <दिव> 'एक विशिष्ट मान के साथ असाइन किए गए वर्ग के साथ टैग करें।
चरण 2: एक शीर्षक जोड़ें
अगला, किसी का उपयोग करके एक शीर्षक डालें ' <एच1> ' को ' <एच6> ” टैग। उदाहरण के लिए, ' <एच1> 'एक शीर्षक जोड़ता है।
चरण 3: सूची में डेटा जोड़ें
सूची के रूप में डेटा सम्मिलित करने के लिए, 'का उपयोग करें' <वह> ' टैग:
< डिव कक्षा = 'पालतू जानवर' >
< एच 1 > पालतू जानवरों की सूची < / एच 1 >
< वह > मुर्गी < / वह >
< वह > बत्तख < / वह >
< वह > कुत्ता < / वह >
< वह > बिल्ली < / वह >
< वह > खरगोश < / वह >
< / डिव >
उपरोक्त कोड का आउटपुट इस प्रकार है:
अब, सूची को स्टाइल करने के लिए CSS अनुभाग की ओर आगे बढ़ें।
चरण 4: शैली '.pet-animal' तत्व
तक पहुंच ' <दिव> 'तत्व असाइन किए गए वर्ग की मदद से' ।पालतू जानवर ” और सूचीबद्ध गुणों को लागू करें:
।पालतू जानवर {
सीमा : 2 पीएक्स छितराया हुआ rgb ( 230 , पंद्रह , पंद्रह ) ;
अंतर : 50 पीएक्स ;
पीछे का रंग : rgb ( 252 , 239 , 169 ) ;
}
यहां:
- ' सीमा 'संपत्ति का उपयोग तत्व के चारों ओर सीमा निर्दिष्ट करने के लिए किया जाता है।
- ' अंतर 'तत्व सीमा के आसपास के स्थान को परिभाषित करता है।
- ' पीछे का रंग ”तत्व के पीछे एक रंग आवंटित करता है।
परिणामी छवि उपरोक्त कोड का आउटपुट दिखाती है:
चरण 5: शैली जोड़ी गई सूची 'ली'
अब, 'की सूची तक पहुँचें डिव 'कक्षा वाले कंटेनर' पालतू जानवर 'का उपयोग करना' .पेट-जानवर> ली ” और नीचे दी गई संपत्तियों को लागू करें:
।पालतू जानवर > वह {
दृश्यता : छुपे हुए ;
अस्पष्टता : 0.2 ;
संक्रमण : दृश्यता 0 , अस्पष्टता 0.5s रैखिक ;
}
यहां:
- ' दृश्यता 'सीएसएस का उपयोग किसी दस्तावेज़ के लेआउट को बदले बिना तत्व की दृश्यता को सेट करने के लिए किया जाता है, जैसे छुपा या दृश्यमान।
- ' अस्पष्टता 'एक तत्व की पारदर्शिता निर्दिष्ट करता है।
- ' संक्रमण 'उपयोगकर्ताओं को दी गई अवधि में संपत्ति मूल्यों को सुचारू रूप से बदलने की अनुमति देता है:
चरण 6: 'होवर' छद्म वर्ग लागू करें
अब, लागू करें ' मंडराना सूची में संपत्ति:
।पालतू जानवर : मंडराना > वह {
दृश्यता : दृश्यमान ;
अस्पष्टता : एक ;
}
' : होवर CSS एक छद्म वर्ग है जो रन टाइम पर परिवर्तन करता है जब माउस पॉइंटर को तत्व पर ले जाया जाता है। 'का उपयोग करके एक सूची दृश्यमान बनाएं दृश्यता 'और' का उपयोग करके पारदर्शिता सेट करें अस्पष्टता होवर पर सूची के लिए सीएसएस गुण:
यह देखा जा सकता है कि हमने 'पर संक्रमण को सफलतापूर्वक लागू कर दिया है' दिखाना ' संपत्ति।
निष्कर्ष
CSS ट्रांज़िशन को सीधे “पर लागू नहीं किया जा सकता है दिखाना ' संपत्ति। हालाँकि, इसे वैकल्पिक तरीके से लागू किया जा सकता है। ऐसा करने के लिए, HTML दस्तावेज़ पर सूची टैग जोड़ें, टैग नाम से सूची तक पहुंचें और 'लागू करें' संक्रमण ”, “ अस्पष्टता ', और ' दृश्यता सूची में सीएसएस गुण। फिर, 'का उपयोग करें : हॉवर 'छद्म वर्ग और दृश्यता मान को' के रूप में सेट करें दृश्यमान ”। इस पोस्ट में बताया गया है कि CSS डिस्प्ले प्रॉपर्टी में ट्रांज़िशन कैसे लागू किया जाता है।
सबसे पहले, 'का उपयोग करके एक div कंटेनर बनाएं' <दिव> 'एक विशिष्ट मान के साथ असाइन किए गए वर्ग के साथ टैग करें।
चरण 2: एक शीर्षक जोड़ें
अगला, किसी का उपयोग करके एक शीर्षक डालें ' <एच1> ' को ' <एच6> ” टैग। उदाहरण के लिए, ' <एच1> 'एक शीर्षक जोड़ता है।
चरण 3: सूची में डेटा जोड़ें
सूची के रूप में डेटा सम्मिलित करने के लिए, 'का उपयोग करें' <वह> ' टैग:
< डिव कक्षा = 'पालतू जानवर' >
< एच 1 > पालतू जानवरों की सूची < / एच 1 >
< वह > मुर्गी < / वह >
< वह > बत्तख < / वह >
< वह > कुत्ता < / वह >
< वह > बिल्ली < / वह >
< वह > खरगोश < / वह >
< / डिव >
उपरोक्त कोड का आउटपुट इस प्रकार है:
अब, सूची को स्टाइल करने के लिए CSS अनुभाग की ओर आगे बढ़ें।
चरण 4: शैली '.pet-animal' तत्व
तक पहुंच ' <दिव> 'तत्व असाइन किए गए वर्ग की मदद से' ।पालतू जानवर ” और सूचीबद्ध गुणों को लागू करें:
।पालतू जानवर {सीमा : 2 पीएक्स छितराया हुआ rgb ( 230 , पंद्रह , पंद्रह ) ;
अंतर : 50 पीएक्स ;
पीछे का रंग : rgb ( 252 , 239 , 169 ) ;
}
यहां:
- ' सीमा 'संपत्ति का उपयोग तत्व के चारों ओर सीमा निर्दिष्ट करने के लिए किया जाता है।
- ' अंतर 'तत्व सीमा के आसपास के स्थान को परिभाषित करता है।
- ' पीछे का रंग ”तत्व के पीछे एक रंग आवंटित करता है।
परिणामी छवि उपरोक्त कोड का आउटपुट दिखाती है:
चरण 5: शैली जोड़ी गई सूची 'ली'
अब, 'की सूची तक पहुँचें डिव 'कक्षा वाले कंटेनर' पालतू जानवर 'का उपयोग करना' .पेट-जानवर> ली ” और नीचे दी गई संपत्तियों को लागू करें:
।पालतू जानवर > वह {दृश्यता : छुपे हुए ;
अस्पष्टता : 0.2 ;
संक्रमण : दृश्यता 0 , अस्पष्टता 0.5s रैखिक ;
}
यहां:
- ' दृश्यता 'सीएसएस का उपयोग किसी दस्तावेज़ के लेआउट को बदले बिना तत्व की दृश्यता को सेट करने के लिए किया जाता है, जैसे छुपा या दृश्यमान।
- ' अस्पष्टता 'एक तत्व की पारदर्शिता निर्दिष्ट करता है।
- ' संक्रमण 'उपयोगकर्ताओं को दी गई अवधि में संपत्ति मूल्यों को सुचारू रूप से बदलने की अनुमति देता है:
चरण 6: 'होवर' छद्म वर्ग लागू करें
अब, लागू करें ' मंडराना सूची में संपत्ति:
।पालतू जानवर : मंडराना > वह {दृश्यता : दृश्यमान ;
अस्पष्टता : एक ;
}
' : होवर CSS एक छद्म वर्ग है जो रन टाइम पर परिवर्तन करता है जब माउस पॉइंटर को तत्व पर ले जाया जाता है। 'का उपयोग करके एक सूची दृश्यमान बनाएं दृश्यता 'और' का उपयोग करके पारदर्शिता सेट करें अस्पष्टता होवर पर सूची के लिए सीएसएस गुण:
यह देखा जा सकता है कि हमने 'पर संक्रमण को सफलतापूर्वक लागू कर दिया है' दिखाना ' संपत्ति।
निष्कर्ष
CSS ट्रांज़िशन को सीधे “पर लागू नहीं किया जा सकता है दिखाना ' संपत्ति। हालाँकि, इसे वैकल्पिक तरीके से लागू किया जा सकता है। ऐसा करने के लिए, HTML दस्तावेज़ पर सूची टैग जोड़ें, टैग नाम से सूची तक पहुंचें और 'लागू करें' संक्रमण ”, “ अस्पष्टता ', और ' दृश्यता सूची में सीएसएस गुण। फिर, 'का उपयोग करें : हॉवर 'छद्म वर्ग और दृश्यता मान को' के रूप में सेट करें दृश्यमान ”। इस पोस्ट में बताया गया है कि CSS डिस्प्ले प्रॉपर्टी में ट्रांज़िशन कैसे लागू किया जाता है।