CSSతో బ్లింక్/ఫ్లాషింగ్ టెక్స్ట్‌ను ఎలా తయారు చేయాలి

DIV మూలకం మధ్య శీర్షికను పేర్కొనడానికి మూలకం:

---

---

< div తరగతి = 'బ్లింక్-స్టైల్' >
< h3 > Linux h3 >
div >

HTML మూలకాలను స్టైలింగ్ చేయడానికి ముందుకు వెళ్దాం.

శైలి 'బ్లింక్-స్టైల్' div

.blink-style {
నేపథ్యం: rgb ( 0 , 0 , 0 ) ;
}

CSS' నేపథ్య 'లక్షణం' తరగతితో DIV మూలకానికి వర్తించబడుతుంది బ్లింక్-శైలి ”.

శైలి 'h3' మూలకం

h3 {
టెక్స్ట్-అలైన్: సెంటర్;
ఫాంట్-కుటుంబం: వర్దానా;
రంగు: #ffc310;
యానిమేషన్: బ్లింక్-టెక్స్ట్ 1.9s లీనియర్ అనంతం;
ఫాంట్ పరిమాణం: 6em;
}

HTML '

'మూలకం క్రింది CSS లక్షణాలతో అలంకరించబడింది:

• ' టెక్స్ట్-అలైన్ ” లక్షణం మూలకం యొక్క వచనం యొక్క అమరికను సెట్ చేస్తుంది.
• ' ఫాంట్ కుటుంబం ” టెక్స్ట్ కోసం ఫాంట్ శైలిని నిర్వచిస్తుంది.
• ' రంగు ” మూలకం యొక్క వచనాన్ని రంగు వేయడానికి ఉపయోగించబడుతుంది.
• ' యానిమేషన్ ” అనేది యానిమేషన్ పేరు, యానిమేషన్ వ్యవధి, యానిమేషన్-టైమింగ్ ఫంక్షన్ మరియు యానిమేషన్-ఇటరేషన్-కౌంట్ ప్రాపర్టీ విలువలను పేర్కొనే షార్ట్‌హ్యాండ్ ప్రాపర్టీ.
• ' ఫాంట్ పరిమాణం 'ప్రాపర్టీ ప్రధానంగా 'px' మరియు 'em' యూనిట్లలో ఫాంట్ పరిమాణాన్ని సర్దుబాటు చేస్తుంది.

“బ్లింక్-టెక్స్ట్” యానిమేషన్‌కు “@కీఫ్రేమ్ రూల్”ని వర్తింపజేయండి

@ కీఫ్రేమ్‌లు బ్లింక్-టెక్స్ట్ {
0 % {
అస్పష్టత: 0 ;
}
యాభై % {
అస్పష్టత: ఒకటి ;
}
100 % {
అస్పష్టత: 0 ;
}

యానిమేషన్ పేరు ' బ్లింక్-టెక్స్ట్ ” యానిమేషన్ ప్రాపర్టీలో పేర్కొనబడింది. ది ' @కీఫ్రేమ్ క్రింద పేర్కొన్న విధంగా వివిధ వ్యవధిలో యానిమేషన్ ప్రవర్తనను సూచించే యానిమేషన్ పేరుకు ముందు నియమం జోడించబడింది:

• వద్ద ' 0% ”యానిమేషన్, టెక్స్ట్ అస్పష్టత 0గా సెట్ చేయబడింది.
• వద్ద ' యాభై% ”యానిమేషన్, టెక్స్ట్ అస్పష్టత 1కి సెట్ చేయబడింది.
• వద్ద ' 100% ”యానిమేషన్, టెక్స్ట్ అస్పష్టత 0కి సెట్ చేయబడింది.

అవుట్‌పుట్

ఉదాహరణ 2: బహుళ మెరిసే వచనాన్ని తయారు చేయడం

HTMLలో బహుళ మెరిసే టెక్స్ట్‌లను రూపొందించడానికి, దిగువ ఇవ్వబడిన దశలను అనుసరించండి:

• మొదట, ఒక 'ని ఉంచండి
  'మూలకం మరియు దానికి తరగతిని కేటాయించండి' టెక్స్ట్-డివి ”.
• అప్పుడు, రెండు జోడించండి '

  ” అంశాలు కొంత వచనాన్ని చేర్చాలి.

• మొదటి '

  ' మూలకం '' తరగతి కేటాయించబడింది తళతళలాడుతోంది ”.

• రెండవది రెండు తరగతులు కేటాయించబడింది, ' తళతళలాడుతోంది 'మరియు' ఒకటి ”. స్టైలింగ్ లక్షణాలను ప్రకటించడానికి CSSలో రెండు తరగతులు యాక్సెస్ చేయబడతాయి:

< div తరగతి = 'టెక్స్ట్-డివ్' >
< p తరగతి = 'ఫ్లాషింగ్' > ట్వింకిల్ ట్వింకిల్ p >
< p తరగతి = 'ఫ్లాషింగ్ ఒకటి' > చిన్న నక్షత్రం * p >
div >

ఇప్పుడు, HTML 'ని స్టైల్ చేయడానికి CSS విభాగాన్ని చూడండి

”మూలకాలు.

శైలి 'టెక్స్ట్-డివ్' డివి

.వచన-div {
వెడల్పు: 400px;
మార్జిన్: కారు;
నేపథ్య రంగు: rgb ( 42 , 49 , 49 ) ;
పాడింగ్: 8px;
}

ది ' .వచన-div ” అనేది

మూలకాన్ని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది. కర్లీ బ్రాకెట్లలో, కింది CSS లక్షణాలు “.text-div”కి వర్తింపజేయబడతాయి:

• ' వెడల్పు ”ప్రాపర్టీ మూలకం వెడల్పును సర్దుబాటు చేస్తుంది.
• ' మార్జిన్ ” మూలకం చుట్టూ ఖాళీని జోడిస్తుంది.
• ' నేపథ్య రంగు ” నేపథ్య రంగును సెట్ చేస్తుంది.
• ' పాడింగ్ ” మూలకం యొక్క సరిహద్దులో ఖాళీని ఉత్పత్తి చేస్తుంది.

శైలి 'ఫ్లాషింగ్' తరగతి

.ఫ్లాషింగ్ {
రంగు: పసుపు;
ఫాంట్ పరిమాణం: 40px;
ఫాంట్-కుటుంబం: కర్సివ్;
ఫాంట్-వెయిట్: బోల్డ్;
యానిమేషన్: ఫ్లాషింగ్-స్టైల్ 0.6s లీనియర్ అనంతం;
}

ది ' .ఫ్లాషింగ్ ” HTML

ట్యాగ్‌లను యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది. ఈ తరగతిలో కింది లక్షణాలు అమలు చేయబడ్డాయి:

• ' ఫాంట్-వెయిట్ ” ఫాంట్ యొక్క మందాన్ని సూచిస్తుంది.
• ఇతర లక్షణాలు పై విభాగంలో వివరించబడ్డాయి.

'ఫ్లాషింగ్-స్టైల్' యానిమేషన్‌కు '@కీఫ్రేమ్ రూల్'ని వర్తింపజేయండి

@ కీఫ్రేమ్‌లు ఫ్లాషింగ్-స్టైల్ {
0 % {
అస్పష్టత: 0 ;
}
}

ప్రవర్తనను సర్దుబాటు చేయండి ' ఫ్లాషింగ్-శైలి 'ని ఉపయోగించి యానిమేషన్' @కీఫ్రేమ్ 'నియమాలు. యానిమేషన్ ప్రారంభంలో, టెక్స్ట్ అస్పష్టత 0 అవుతుంది, ఇది మూలకాల పూర్తి పారదర్శకత స్థాయిని సూచిస్తుంది.

రెండవదానిపై యానిమేషన్ చేయడానికి '

'మూలకం కొద్దిగా భిన్నంగా ఉంటుంది, తరగతి' ఒకటి ” కింది యానిమేషన్ శైలులతో ప్రకటించబడింది:

శైలి 'ఒక' తరగతి

.ఒకటి {
యానిమేషన్: ఒక 1s లీనియర్ అనంతం;
}
@ కీఫ్రేమ్‌లు ఒకటి {
యాభై % {
అస్పష్టత: 0 ;
}
}

అవుట్‌పుట్

విభిన్న CSS స్టైలింగ్ లక్షణాలను ఉపయోగించి బ్లింకింగ్ టెక్స్ట్‌ను ఎలా తయారు చేయాలో మేము సమర్థవంతంగా నేర్చుకున్నాము.

ముగింపు

HTMLలో, టెక్స్ట్ స్టైల్ బ్లింక్ అయ్యేలా చేయడానికి అనేక CSS లక్షణాలు ఉపయోగించబడతాయి. ది ' యానిమేషన్ 'మరియు' అస్పష్టత ” లక్షణాలు సాధారణంగా ఈ సందర్భంలో నిర్వచించబడతాయి. మెరిసే ప్రవర్తనను సర్దుబాటు చేయడానికి, ' @కీఫ్రేమ్ ”అనిమేషన్ ప్రాపర్టీ కోసం నియమం ప్రకటించబడింది. CSSని ఉపయోగించి HTMLలో మెరిసే లేదా మెరిసే వచనాన్ని ఎలా తయారు చేయాలో ఈ కథనం వివరించింది.