CSS மூலம் ஒளிரும்/ஒளிரும் உரையை உருவாக்குவது எப்படி

'உறுப்பு div உறுப்புக்கு இடையே ஒரு தலைப்பைக் குறிப்பிட:

---

---

< div வர்க்கம் = 'சிமிட்டும் பாணி' >
< h3 > லினக்ஸ் h3 >
div >

HTML கூறுகளை ஸ்டைலிங் செய்ய முன்னோக்கி செல்லலாம்.

உடை 'பிளிங்க்-ஸ்டைல்' div

.பிளிங்க்-பாணி {
பின்னணி: rgb ( 0 , 0 , 0 ) ;
}

CSS” பின்னணி 'பிரிவு உறுப்பிற்கு 'வகுப்புடன் சொத்து பயன்படுத்தப்படுகிறது' கண் சிமிட்டும் பாணி ”.

உடை 'h3' உறுப்பு

h3 {
text-align: மையம்;
எழுத்துரு குடும்பம்: வெர்டானா;
நிறம்: #ffc310;
animation: blink-text 1.9s linear infinite;
எழுத்துரு அளவு: 6em;
}

HTML '

'உறுப்பு பின்வரும் CSS பண்புகளுடன் அலங்கரிக்கப்பட்டுள்ளது:

• ' உரை-சீரமைப்பு ”பண்பு உறுப்புகளின் உரையின் சீரமைப்பை அமைக்கிறது.
• ' எழுத்துரு குடும்பம் ” உரைக்கான எழுத்துரு பாணியை வரையறுக்கிறது.
• ' நிறம் 'உறுப்பின் உரையை வண்ணமயமாக்கப் பயன்படுகிறது.
• ' இயங்குபடம் ” என்பது அனிமேஷன் பெயர், அனிமேஷன் கால அளவு, அனிமேஷன்-டைமிங் செயல்பாடு மற்றும் அனிமேஷன்-இட்டேஷன்-கவுண்ட் சொத்து மதிப்புகளைக் குறிப்பிடும் சுருக்கெழுத்து சொத்து.
• ' எழுத்துரு அளவு ”பண்பு எழுத்துரு அளவை முக்கியமாக “px” மற்றும் “em” அலகுகளில் சரிசெய்கிறது.

'@keyframe விதி'யை 'பிளிங்க்-டெக்ஸ்ட்' அனிமேஷனுக்குப் பயன்படுத்தவும்

@ கீஃப்ரேம்கள் சிமிட்டும்-உரை {
0 % {
ஒளிபுகாநிலை: 0 ;
}
ஐம்பது % {
ஒளிபுகாநிலை: ஒன்று ;
}
100 % {
ஒளிபுகாநிலை: 0 ;
}

அனிமேஷன் பெயர் ' கண் சிமிட்டும் உரை ” என்பது அனிமேஷன் சொத்தில் குறிப்பிடப்பட்டுள்ளது. ' @keyframe ” விதி அனிமேஷன் பெயருக்கு முன் சேர்க்கப்பட்டுள்ளது, இது கீழே குறிப்பிட்டுள்ளபடி வெவ்வேறு இடைவெளிகளில் அனிமேஷன் நடத்தையைக் குறிக்கிறது:

• மணிக்கு ' 0% 'அனிமேஷன், உரை ஒளிபுகாநிலை 0 ஆக அமைக்கப்பட்டுள்ளது.
• மணிக்கு ' ஐம்பது% 'அனிமேஷன், உரை ஒளிபுகாநிலை 1 ஆக அமைக்கப்பட்டுள்ளது.
• மணிக்கு ' 100% 'அனிமேஷன், உரை ஒளிபுகாநிலை 0 ஆக அமைக்கப்பட்டுள்ளது.

வெளியீடு

எடுத்துக்காட்டு 2: பல ஒளிரும் உரையை உருவாக்குதல்

HTML இல் பல ஒளிரும் உரைகளை உருவாக்க, கீழே கொடுக்கப்பட்டுள்ள படிகளைப் பின்பற்றவும்:

• முதலில், 'வை'
  'உறுப்பு மற்றும் அதற்கு ஒரு வகுப்பை ஒதுக்கவும்' உரை-திவ் ”.
• பின்னர் இரண்டைச் சேர்க்கவும்'

  சில உரைகளை உள்ளடக்கிய கூறுகள்.

• முதல் “

  ” உறுப்புக்கு ஒரு வகுப்பு ஒதுக்கப்பட்டுள்ளது ஒளிரும் ”.

• இரண்டாவதாக இரண்டு வகுப்புகள் ஒதுக்கப்பட்டுள்ளன. ஒளிரும் 'மற்றும்' ஒன்று ”. ஸ்டைலிங் பண்புகளை அறிவிக்க இரண்டு வகுப்புகளும் CSS இல் அணுகப்படுகின்றன:

< div வர்க்கம் = 'உரை-திவ்' >
< ப வர்க்கம் = 'ஒளிரும்' > ட்விங்கிள் ட்விங்கிள் ப >
< ப வர்க்கம் = 'ஒளிரும் ஒன்று' > குட்டி நட்சத்திரம் * ப >
div >

இப்போது, ​​HTML ஐ வடிவமைக்க CSS பகுதியைப் பார்க்கவும்.

'கூறுகள்.

பாணி 'உரை-திவ்' div

.உரை-திவ் {
அகலம்: 400px;
விளிம்பு: கார்;
பின்னணி நிறம்: rgb ( 42 , 49 , 49 ) ;
திணிப்பு: 8px;
}

' .உரை-திவ் ” என்பது

உறுப்பை அணுக பயன்படுகிறது. சுருள் அடைப்புக்குறிக்குள், பின்வரும் CSS பண்புகள் “.text-div”க்கு பயன்படுத்தப்படும்:

• ' அகலம் 'பண்பு உறுப்புகளின் அகலத்தை சரிசெய்கிறது.
• ' விளிம்பு ” உறுப்பைச் சுற்றி இடம் சேர்க்கிறது.
• ' பின்னணி நிறம் ” பின்னணி நிறத்தை அமைக்கிறது.
• ' திணிப்பு 'உறுப்பின் எல்லைக்குள் இடத்தை உருவாக்குகிறது.

பாணி 'ஒளிரும்' வகுப்பு

.ஒளிரும் {
நிறம்: மஞ்சள்;
எழுத்துரு அளவு: 40px;
font-family: cursive;
எழுத்துரு எடை: தடித்த;
animation: flashing-style 0.6s linear infinite;
}

' .ஒளிரும் ” HTML

குறிச்சொற்களை அணுக பயன்படுகிறது. இந்த வகுப்பில் பின்வரும் பண்புகள் செயல்படுத்தப்படுகின்றன:

• ' எழுத்துரு-எடை ” என்பது எழுத்துருவின் தடிமனைக் குறிக்கிறது.
• மற்ற பண்புகள் மேலே உள்ள பிரிவில் விளக்கப்பட்டுள்ளன.

'ஒளிரும் பாணி' அனிமேஷனுக்கு '@keyframe விதி' பயன்படுத்தவும்

@ கீஃப்ரேம்கள் ஒளிரும் பாணி {
0 % {
ஒளிபுகாநிலை: 0 ;
}
}

'இன் நடத்தையை சரிசெய்யவும் ஒளிரும்-பாணி 'அனிமேஷன்' ஐப் பயன்படுத்தி @keyframe ” விதிகள். அனிமேஷனின் தொடக்கத்தில், உரை ஒளிபுகாநிலை 0 ஆக இருக்கும், இது உறுப்புகளின் முழுமையான வெளிப்படைத்தன்மை அளவைக் குறிக்கிறது.

இரண்டாவது அனிமேஷனை உருவாக்க '

'உறுப்பு சற்று வித்தியாசமானது, வகுப்பு' ஒன்று ” பின்வரும் அனிமேஷன் பாணிகளுடன் அறிவிக்கப்பட்டது:

பாணி 'ஒன்று' வகுப்பு

.ஒன்று {
animation: one 1s linear infinite;
}
@ கீஃப்ரேம்கள் ஒன்று {
ஐம்பது % {
ஒளிபுகாநிலை: 0 ;
}
}

வெளியீடு

வெவ்வேறு CSS ஸ்டைலிங் பண்புகளைப் பயன்படுத்தி ஒளிரும் உரையை எவ்வாறு உருவாக்குவது என்பதை திறம்பட கற்றுக்கொண்டோம்.

முடிவுரை

HTML இல், உரை நடையை ஒளிரச் செய்ய பல CSS பண்புகள் பயன்படுத்தப்படுகின்றன. ' இயங்குபடம் 'மற்றும்' ஒளிபுகாநிலை 'பண்புகள் பொதுவாக இந்த சூழலில் வரையறுக்கப்படுகின்றன. ஒளிரும் நடத்தையை சரிசெய்ய, ' @keyframe 'அனிமேஷன் சொத்துக்கான விதி அறிவிக்கப்பட்டது. CSS ஐப் பயன்படுத்தி HTML இல் ஒளிரும் அல்லது ஒளிரும் உரையை எவ்வாறு உருவாக்குவது என்பதை இந்தக் கட்டுரை விளக்கியுள்ளது.