यह लेख प्रदान करेगा:
- विधि 1: सीएसएस एनीमेशन संपत्ति का उपयोग करके फ़ेड-इन प्रभाव
- विधि 2: CSS ट्रांज़िशन गुण का उपयोग करके फेड-इन प्रभाव
विधि 1: सीएसएस 'एनीमेशन' संपत्ति का उपयोग करके फ़ेड-इन प्रभाव
एक साधारण HTML पेज डिजाइन करने के लिए, इसमें निम्नलिखित तत्व जोड़ें:
- जोड़ें ' <एच2> 'तत्व' के साथ शैली ' गुण। 'शैली' विशेषता में तत्व के स्टाइलिंग गुण शामिल हैं।
- लागू करें ' रंग ” तत्व के पाठ रंग को परिभाषित करने के लिए शैली विशेषता में संपत्ति।
- उसके बाद, 'का प्रयोग करें ”तत्व कुछ पाठ या एक साधारण अनुच्छेद जोड़ने के लिए।
नीचे एचटीएमएल कोड है:
< एच 2 शैली = 'रंग: आरजीबी (84, 8, 191)' >
Linuxhint ट्यूटोरियल वेबसाइट
< / एच 2 >
< पी > पृष्ठ लोड पर फ़ेड-इन प्रभाव < / पी >
HTML पेज सफलतापूर्वक बनाया गया है:
सीएसएस अनुभाग में, पृष्ठ पर फ़ेड-इन प्रभाव लागू करने के लिए, “ एनीमेशन “सीएसएस संपत्ति का उपयोग” पर किया जाएगा <शरीर> ” HTML पृष्ठ का तत्व।
शैली 'शरीर' तत्व
तन {एनिमेशन: फेडइनपेज ईज 3एस;
एनीमेशन-पुनरावृत्ति-गणना: एक ;
}
“
” को निम्नलिखित CSS गुणों के साथ लागू किया जाता है:- ' एनीमेशन ” आशुलिपि संपत्ति है जो कई मान निर्दिष्ट करके एनीमेशन सेट करती है। यहां, एनीमेशन का नाम, एनीमेशन-टाइमिंग-फ़ंक्शन और एनीमेशन-अवधि परिभाषित की गई है।
- ' एनीमेशन-पुनरावृत्ति-गिनती ” परिभाषित करता है कि एनीमेशन को कितनी बार पुनरावृति करनी चाहिए।
'एनीमेशन' पर '@keyframes' नियम लागू करें
@कीफ्रेम फीकाइनपेज {0 % {
अस्पष्टता: 0 ;
}
100 % {
अस्पष्टता: एक ;
}
}
परिभाषित करने के लिए ' @कीफ्रेम एनिमेशन के लिए नियम, @keyframes कीवर्ड के बाद एनिमेशन नाम का उल्लेख करें। एनीमेशन व्यवहार को निम्नानुसार संशोधित करें:
- पर ' 0% 'एनीमेशन,' अस्पष्टता ” संपत्ति को मान 0 दिया गया है। इसका मतलब है कि जब एनीमेशन शुरू होता है, तो छवि पारदर्शी होती है।
- पर ' 100% 'एनीमेशन, अपारदर्शिता' पर सेट है एक ”, जो एक ठोस रंग को संदर्भित करता है।
उत्पादन
पृष्ठ लोड पर फ़ेड-इन प्रभाव लागू करने के लिए दूसरी विधि की ओर बढ़ते हैं।
विधि 2: सीएसएस 'संक्रमण' संपत्ति का उपयोग करके फ़ेड-इन प्रभाव
एक जोड़ें ' गोली भरना 'के भीतर विशेषता' <शरीर> ' तत्व। पेज लोड होने पर यह घटना शुरू हो जाती है। लोड होने पर, बॉडी एलिमेंट की अपारदर्शिता 'पर सेट होती है' एक ”, जो एक ठोस रंग से संबंधित है:
< तन गोली भरना = 'document.body.style.opacity='1'' >इस उदाहरण में, सीएसएस ' संक्रमण ' संपत्ति का उपयोग फ़ेड-इन प्रभाव जोड़ने के लिए किया जाता है:
तन {अस्पष्टता: 0 ;
संक्रमण: अपारदर्शिता 6s;
}
उपर्युक्त गुणों की व्याख्या निम्नलिखित है:
- ' अस्पष्टता ” संपत्ति तत्वों की पारदर्शिता को परिभाषित करती है।
- सीएसएस का उपयोग करना' संक्रमण ”, निर्दिष्ट समय के दौरान गुणों के मूल्यों को धीरे-धीरे बदलें।
उत्पादन
हमने आपको पृष्ठ लोड पर फ़ेड-इन प्रभाव के लिए CSS का उपयोग करने के तरीके सिखाए हैं।
निष्कर्ष
HTML तत्वों पर फ़ेड-इन प्रभाव लागू करने के लिए कई CSS गुणों का उपयोग किया जा सकता है। अधिक विशेष रूप से, ' एनीमेशन ”, “ अस्पष्टता ', और ' संक्रमण ” गुणों का उपयोग पृष्ठों या तत्वों पर एनिमेटेड प्रभावों को निर्दिष्ट करने के लिए किया जा सकता है। एनिमेशन 'का उपयोग करके समायोजित किए जाते हैं @कीफ्रेम ' नियम। इस लेख में CSS का उपयोग करके पृष्ठ लोड पर फ़ेड-इन प्रभाव जोड़ने के तरीकों की व्याख्या की गई है।