वेब एप्लिकेशन विकसित करते समय, डेवलपर्स हमेशा CSS स्टाइलिंग गुणों को प्रभावी ढंग से लागू करते हैं। CSS कई स्टाइल गुण प्रदान करता है, जैसे रंग, स्थिति, संरेखण, और बहुत कुछ। इन गुणों के अतिरिक्त, यह हमें तत्वों पर एनीमेशन क्रिया सेट करने की अनुमति देता है। इस उद्देश्य के लिए, ' @कीफ्रेम एस 'नियमों का प्रयोग किया जाएगा।
यह लेख प्रदर्शित करेगा कि हम CSS के साथ ब्लिंकिंग/फ्लैशिंग टेक्स्ट कैसे बना सकते हैं।
सीएसएस के साथ ब्लिंकिंग टेक्स्ट कैसे बनाएं?
पाठ को ब्लिंक करने के लिए, CSS ' अस्पष्टता 'के साथ संपत्ति' @कीफ्रेम 'नियम लागू किया जा सकता है। नीचे दिए गए उदाहरण देखें।
उदाहरण 1: ब्लिंकिंग टेक्स्ट बनाएं
HTML में, 'जोड़ें' <दिव> 'तत्व, और इसे असाइन करें' ब्लिंक-शैली ' कक्षा। अगला, 'जोड़ें' <एच3> 'तत्व div तत्व के बीच एक शीर्षक निर्दिष्ट करने के लिए:
< डिव कक्षा = 'ब्लिंक-स्टाइल' >
< h3 > लिनक्स h3 >
डिव >
आइए HTML तत्वों को स्टाइल करने के लिए आगे बढ़ें।
स्टाइल 'ब्लिंक-स्टाइल' डिव
.ब्लिंक-शैली {पृष्ठभूमि: आरजीबी ( 0 , 0 , 0 ) ;
}
सीएसएस ' पार्श्वभूमि 'संपत्ति वर्ग के साथ div तत्व पर लागू होती है' ब्लिंक-शैली ”।
शैली 'h3' तत्व
h3 {पाठ-संरेखण: केंद्र;
फ़ॉन्ट-परिवार: वरदाना;
रंग: #ffc310;
एनीमेशन: ब्लिंक-टेक्स्ट 1.9 एस रैखिक अनंत;
फ़ॉन्ट-आकार: 6em;
}
एचटीएमएल ' <एच3> ”तत्व निम्नलिखित सीएसएस गुणों से सजाया गया है:
- ' पाठ संरेखित ” संपत्ति तत्व के पाठ के संरेखण को निर्धारित करती है।
- ' फुहारा परिवार ” पाठ के लिए एक फ़ॉन्ट शैली को परिभाषित करता है।
- ' रंग ” का उपयोग तत्व के पाठ को रंगने के लिए किया जाता है।
- ' एनीमेशन 'आशुलिपि संपत्ति है जो एनीमेशन नाम, एनीमेशन अवधि, एनीमेशन-टाइमिंग फ़ंक्शन और एनीमेशन-पुनरावृत्ति-गिनती संपत्ति मूल्यों को निर्दिष्ट करती है।
- ' फ़ॉन्ट आकार ' संपत्ति मुख्य रूप से 'पीएक्स' और 'एम' इकाइयों में फ़ॉन्ट आकार समायोजित करती है।
'ब्लिंक-टेक्स्ट' एनीमेशन के लिए '@कीफ्रेम नियम' लागू करें
@ keyframes ब्लिंक-टेक्स्ट {0 % {
अस्पष्टता: 0 ;
}
पचास % {
अस्पष्टता: एक ;
}
100 % {
अस्पष्टता: 0 ;
}
एनीमेशन का नाम ' ब्लिंक-टेक्स्ट ” एनीमेशन संपत्ति में निर्दिष्ट है। ' @कीफ्रेम ” नियम एनीमेशन नाम से पहले जोड़ा जाता है जो नीचे उल्लिखित विभिन्न अंतरालों पर एनीमेशन व्यवहार को दर्शाता है:
- पर ' 0% ”एनीमेशन, टेक्स्ट अपारदर्शिता को 0 के रूप में सेट किया गया है।
- पर ' पचास% ” एनिमेशन, टेक्स्ट की अपारदर्शिता 1 पर सेट है।
- पर ' 100% ” एनीमेशन, टेक्स्ट अपारदर्शिता 0 पर सेट है।
उत्पादन
उदाहरण 2: एकाधिक ब्लिंकिंग टेक्स्ट बनाना
HTML में कई ब्लिंकिंग टेक्स्ट बनाने के लिए, नीचे दिए गए चरणों का पालन करें:
- सबसे पहले, एक 'रखें <दिव> 'तत्व और इसे एक वर्ग असाइन करें' text-div ”।
- फिर, दो जोड़ें ' ” तत्व कुछ पाठ शामिल करने के लिए।
- पहले “
” तत्व को एक वर्ग सौंपा गया है “ चमकता ”।
- दूसरे को दो वर्ग सौंपे गए हैं, ' चमकता ' और ' एक ”। स्टाइलिंग गुण घोषित करने के लिए दोनों वर्गों को CSS में एक्सेस किया गया है:
< पी कक्षा = 'चमकता' > टिमटिमाना टिमटिमाना पी >
< पी कक्षा = 'चमकता हुआ' > छोटा सितारा * पी >
डिव >
अब, HTML को स्टाइल करने के लिए CSS अनुभाग देखें “ ”तत्व।
स्टाइल 'टेक्स्ट-डिव' डिव
.text-div {चौड़ाई: 400 पीएक्स;
मार्जिन: ऑटो;
पृष्ठभूमि-रंग: आरजीबी ( 42 , 49 , 49 ) ;
पैडिंग: 8 पीएक्स;
}
' .text-div ” का उपयोग
- ' चौड़ाई ” संपत्ति तत्व की चौड़ाई को समायोजित करती है।
- ' अंतर ”तत्व के चारों ओर स्थान जोड़ता है।
- ' पीछे का रंग ” पृष्ठभूमि का रंग सेट करता है।
- ' गद्दी 'तत्व की सीमा के भीतर स्थान उत्पन्न करता है।
शैली 'चमकती' वर्ग
चमकती {रंग: पीला;
फ़ॉन्ट-आकार: 40 पीएक्स;
फ़ॉन्ट-परिवार: कर्सिव;
फोंट की मोटाई: बोल्ड;
एनीमेशन: चमकती-शैली 0.6 एस रैखिक अनंत;
}
' चमकती ” का उपयोग HTML
टैग तक पहुँचने के लिए किया जाता है। इस वर्ग में निम्नलिखित गुण लागू किए गए हैं:
- ' फ़ॉन्ट वजन 'फ़ॉन्ट की मोटाई इंगित करता है।
- उपरोक्त अनुभाग में अन्य गुणों की व्याख्या की गई है।
'चमकती-शैली' एनीमेशन के लिए '@कीफ्रेम नियम' लागू करें
@ keyframes चमकती शैली {0 % {
अस्पष्टता: 0 ;
}
}
के व्यवहार को समायोजित करें ' चमकती शैली 'एनीमेशन' का उपयोग कर @कीफ्रेम ' नियम। एनीमेशन की शुरुआत में, टेक्स्ट अपारदर्शिता 0 होगी, जो तत्वों के पूर्ण पारदर्शिता स्तर को दर्शाती है।
दूसरे पर एनीमेशन बनाने के लिए ' 'तत्व थोड़ा अलग, वर्ग' एक ” निम्नलिखित एनीमेशन शैलियों के साथ घोषित किया गया है:
शैली 'एक' वर्ग
।एक {एनिमेशन: एक 1एस रैखिक अनंत;
}
@ मुख्य-फ़्रेम एक {
पचास % {
अस्पष्टता: 0 ;
}
}
उत्पादन
हमने अलग-अलग CSS स्टाइलिंग गुणों का उपयोग करके ब्लिंकिंग टेक्स्ट बनाने का तरीका सीखा है।
निष्कर्ष
HTML में, टेक्स्ट स्टाइल को ब्लिंकिंग बनाने के लिए कई CSS गुणों का उपयोग किया जाता है। ' एनीमेशन ' और ' अस्पष्टता ' गुण आमतौर पर इस संदर्भ में परिभाषित किए जाते हैं। ब्लिंकिंग व्यवहार को समायोजित करने के लिए, ' @कीफ्रेम एक एनीमेशन संपत्ति के लिए नियम घोषित किया गया है। इस लेख में बताया गया है कि CSS का उपयोग करके HTML में ब्लिंकिंग या फ्लैशिंग टेक्स्ट कैसे बनाया जाता है।