இந்த கட்டுரை வழங்கும்:
- முறை 1: CSS அனிமேஷன் பண்புகளைப் பயன்படுத்தி ஃபேட்-இன் விளைவு
- முறை 2: CSS மாற்றும் பண்புகளைப் பயன்படுத்தி ஃபேட்-இன் விளைவு
முறை 1: CSS “அனிமேஷன்” பண்புகளைப் பயன்படுத்தி ஃபேட்-இன் விளைவு
எளிமையான HTML பக்கத்தை வடிவமைக்க, அதில் பின்வரும் உறுப்பைச் சேர்க்கவும்:
- சேர் ' 'உறுப்பு சேர்த்து' பாணி ” பண்பு. 'பாணி' பண்புக்கூறு உறுப்புகளின் ஸ்டைலிங் பண்புகளைக் கொண்டுள்ளது.
- விண்ணப்பிக்கவும் ' நிறம் 'உறுப்பின் உரை நிறத்தை வரையறுக்க பாணி பண்புக்கூறில் உள்ள சொத்து.
- அதன் பிறகு, பயன்படுத்தவும் ' 'உறுப்பு சில உரை அல்லது ஒரு எளிய பத்தி சேர்க்க.
கீழே HTML குறியீடு உள்ளது:
< h2 பாணி = 'நிறம்: rgb(84, 8, 191)' >
Linuxhint டுடோரியல் இணையதளம்
< / h2 >
< ப > பக்க ஏற்றத்தில் மங்கல் விளைவு < / ப >
HTML பக்கம் வெற்றிகரமாக உருவாக்கப்பட்டது:
CSS பிரிவில், பக்கத்தில் ஃபேட்-இன் விளைவைப் பயன்படுத்த, ' இயங்குபடம் 'சிஎஸ்எஸ் சொத்து பயன்படுத்தப்படும்' <உடல்> HTML பக்கத்தின் உறுப்பு.
உடை 'உடல்' உறுப்பு
உடல் {அனிமேஷன்: fadeInPage எளிதாக 3s;
அனிமேஷன்-மறுபடி-எண்ணிக்கை: ஒன்று ;
}
'
' பின்வரும் CSS பண்புகளுடன் பயன்படுத்தப்படுகிறது:- ' இயங்குபடம் ” என்பது சுருக்கெழுத்து சொத்து, இது பல மதிப்புகளைக் குறிப்பிடுவதன் மூலம் அனிமேஷனை அமைக்கிறது. இங்கே, அனிமேஷன் பெயர், அனிமேஷன்-நேர செயல்பாடு மற்றும் அனிமேஷன்-காலம் ஆகியவை வரையறுக்கப்பட்டுள்ளன.
- ' அனிமேஷன்-மறுபடி-எண்ணிக்கை ” அனிமேஷன் எத்தனை முறை திரும்ப திரும்ப வேண்டும் என்பதை வரையறுக்கிறது.
'@keyframes' விதிகளை 'அனிமேஷனில்' பயன்படுத்தவும்
@keyframes fadeInPage {0 % {
ஒளிபுகாநிலை: 0 ;
}
100 % {
ஒளிபுகாநிலை: ஒன்று ;
}
}
வரையறுக்க ' @keyframes ” அனிமேஷனுக்கான விதிகள், @keyframes முக்கிய சொல்லுக்குப் பிறகு அனிமேஷன் பெயரைக் குறிப்பிடவும். அனிமேஷன் நடத்தையை பின்வருமாறு மாற்றவும்:
- மணிக்கு ' 0% 'அனிமேஷன், தி' ஒளிபுகாநிலை 'சொத்துக்கு மதிப்பு 0 ஒதுக்கப்படுகிறது. அனிமேஷன் தொடங்கும் போது, படம் வெளிப்படையானது.
- மணிக்கு ' 100% 'அனிமேஷன், ஒளிபுகாநிலை' என அமைக்கப்பட்டுள்ளது ஒன்று ”, இது ஒரு திட நிறத்தைக் குறிக்கிறது.
வெளியீடு
பக்க ஏற்றத்தில் ஃபேட்-இன் விளைவைப் பயன்படுத்துவதற்கான இரண்டாவது முறையை நோக்கி முன்னேறுவோம்.
முறை 2: CSS 'மாற்றம்' பண்பைப் பயன்படுத்தி ஃபேட்-இன் விளைவு
சேர் ' ஏற்று '' உள்ள பண்பு <உடல்> ”உறுப்பு. இந்த நிகழ்வு பக்கம் ஏற்றும்போது தூண்டப்படுகிறது. ஏற்றப்படும்போது, உடல் உறுப்புகளின் ஒளிபுகாநிலையானது ' ஒன்று ”, இது ஒரு திட நிறத்துடன் தொடர்புடையது:
< உடல் ஏற்று = 'document.body.style.opacity='1'' >இந்த எடுத்துக்காட்டில், CSS ' மாற்றம் 'சொத்து மங்கல் விளைவைச் சேர்க்கப் பயன்படுத்தப்படுகிறது:
உடல் {ஒளிபுகாநிலை: 0 ;
மாற்றம்: ஒளிபுகாநிலை 6s;
}
மேலே கூறப்பட்ட பண்புகளின் விளக்கம் பின்வருமாறு:
- ' ஒளிபுகாநிலை 'சொத்து உறுப்புகளின் வெளிப்படைத்தன்மையை வரையறுக்கிறது.
- CSS ஐப் பயன்படுத்துதல் ' மாற்றம் ”, ஒரு குறிப்பிட்ட நேரத்தில் பண்புகளின் மதிப்புகளை படிப்படியாக மாற்றவும்.
வெளியீடு
பக்க ஏற்றத்தில் மங்கல் விளைவுக்கு CSS ஐப் பயன்படுத்துவதற்கான வழிமுறைகளை நாங்கள் உங்களுக்குக் கற்பித்துள்ளோம்.
முடிவுரை
HTML உறுப்புகளில் ஃபேட்-இன் விளைவைப் பயன்படுத்த பல CSS பண்புகள் பயன்படுத்தப்படலாம். இன்னும் குறிப்பாக, ' இயங்குபடம் ”,” ஒளிபுகாநிலை ', மற்றும் ' மாற்றம் பக்கங்கள் அல்லது உறுப்புகளில் அனிமேஷன் விளைவுகளைக் குறிப்பிட பண்புகள் பயன்படுத்தப்படலாம். '' ஐப் பயன்படுத்தி அனிமேஷன்கள் சரிசெய்யப்படுகின்றன @keyframe ” விதிகள். CSS ஐப் பயன்படுத்தி பக்க ஏற்றத்தில் மங்கல் விளைவைச் சேர்க்கும் முறைகளை இந்தக் கட்டுரை விளக்கியுள்ளது.