இந்த கையேட்டில், '' உடன் div ஐக் காண்பிப்பதற்கான மற்றும் மறைப்பதற்கான செயல்முறையை நாங்கள் கற்றுக்கொள்வோம். மாற்றம் 'CSS இன் சொத்து.
CSS இல் மாற்றத்துடன் ஒரு Div ஐக் காண்பிப்பது மற்றும் மறைப்பது எப்படி?
CSS” மாற்றம் 'சொத்து ஒரு குறிப்பிட்ட காலத்தின் அடிப்படையில் சொத்தின் மதிப்பை மாற்றுவதை எளிதாக்குகிறது. இது ஒரு மிதக்கும் அல்லது செயலில் உள்ள உறுப்பு, அதன் நிலையைப் பொறுத்து இருக்கலாம். மேலும், HTML இல் div ஐக் காட்டவும் மறைக்கவும் CSS இன் மாறுதல் பண்பு பயன்படுத்தப்படுகிறது.
இப்போது, மாற்றம் சொத்தின் தொடரியல் செல்லலாம்.
தொடரியல்
மாற்றம் விளைவை உருவாக்கும் போது நீங்கள் குறிப்பிட வேண்டிய இரண்டு விஷயங்கள் உள்ளன:
அடிப்படையில், ' மாற்றம் ” என்பது ஒரு சுருக்கெழுத்து சொத்து, இது கீழே கொடுக்கப்பட்டுள்ள நான்கு பிற பண்புகளை உள்ளடக்கியது:
மாற்றம் : மாற்றம்-சொத்து மாற்றம்-காலம்மாற்றம்-நேரம்-செயல்பாடு மாற்றம்-தாமதம்
குறிப்பிடப்பட்ட பண்புகளின் விளக்கம் இங்கே:
- மாற்றம்-சொத்து: எந்த CSS சொத்துக்கும் மாற்றத்தை அமைக்க இது பயன்படுகிறது. அகலம், உயரம், ஒளிபுகாநிலை மற்றும் பல.
- மாறுதல் காலம்: மாற்றத்தின் கால அளவைக் குறிப்பிட இது பயன்படுகிறது.
- மாற்றம் நேர செயல்பாடு: மாற்றத்தின் வேகத்தை அமைக்க இது பயன்படுத்தப்படுகிறது.
- மாற்றம் தாமதம்: மாற்றம் தொடங்கும் அல்லது தாமதமாகும் நேரத்தை இது குறிப்பிடுகிறது.
ஒரு உதாரணத்தை எடுத்துக் கொள்வோம், அதில் '' உடன் div ஐக் காண்பிப்போம். மாற்றம் 'CSS இன் சொத்து. இந்த நோக்கத்திற்காக, முதலில், '' div 'மற்றும் ஒரு உள்ளீட்டு வகை' தேர்வுப்பெட்டி ”.
படி 1: டிவியை உருவாக்கி ஸ்டைல் செய்யுங்கள்
HTML
<மையம் ><லேபிள் > Div > <உள்ளீடு வகை = 'செக்பாக்ஸ்' >
>
இனிமேல், பின்னணி-வண்ணப் பண்புகளைப் பயன்படுத்தி divஐ ஸ்டைல் செய்வோம் மற்றும் பின்னணியின் நிறத்தை ' rgb(238, 190, 118) ”. div இன் உயரத்தை '' என அமைப்போம் 150px ' மற்றும் அதைச் சுற்றியுள்ள எல்லையை ' 10px ”,” மேடு ', மற்றும் ' rgb(6, 56, 2) ”. இறுதியில், எழுத்துரு அளவை '' என்று குறிப்பிடுவோம். 50px ”.
CSS
div {பின்னணி நிறம் : rgb ( 238 , 190 , 118 ) ;
உயரம் : 150px ;
எல்லை : 10px மேடு rgb ( 6 , 56 , இரண்டு ) ;
எழுத்துரு அளவு : 50px ;
}
மேலே விவரிக்கப்பட்ட குறியீட்டின் வெளியீடு கீழே கொடுக்கப்பட்டுள்ளது. இங்கே, div மற்றும் தேர்வுப்பெட்டி வெற்றிகரமாக உருவாக்கப்பட்டதைக் காணலாம்:
இப்போது, அடுத்த கட்டத்திற்குச் செல்லவும், அதில் மாற்றம் பண்புகளைப் பயன்படுத்தி div ஐ மறைத்து காண்பிக்கிறோம்.
படி 2: மாற்றத்துடன் ஒரு Div ஐக் காண்பி மற்றும் மறை
இதைச் செய்ய, 'என்று அமைப்பதன் மூலம் மாற்றம் விளைவை அமைப்போம். ஒளிபுகாநிலை ”, அதன் கால அளவு “ 2வி ”, மற்றும் ஒளிபுகாநிலையின் மதிப்பு “ 0 'சிஎஸ்எஸ்ஸில் நாங்கள் உருவாக்கிய div வகுப்பில்:
மாற்றம் : ஒளிபுகாநிலை 2வி ;ஒளிபுகாநிலை : 0 ;
குறிப்பு: நாங்கள் மாற்றத்தைப் பயன்படுத்துவோம் ' ஒளிபுகாநிலை 'உறுப்பின் வெளிப்படைத்தன்மையை அமைப்பதற்கான சொத்து. இங்கே, அதன் மதிப்பை இவ்வாறு குறிப்பிடுவோம் ' 0 ”, அதாவது மாற்றம் தொடங்கும் போது, div இரண்டு வினாடிகளுக்கு மறைக்கப்படும்.
மாற்றம் மதிப்புகளை அமைத்த பிறகு, ''ஐப் பயன்படுத்துவோம் உள்ளீடு HTML கோப்பில் உருவாக்கப்பட்ட உள்ளீட்டு வகையை அணுகவும் மற்றும் உள்ளீட்டு உறுப்பின் போலி வகுப்பை அமைக்கவும் ' : சரிபார்க்கப்பட்டது ”. பின்னர், உருவாக்கப்பட்ட DIVஐ அணுகுவோம், மேலும் ' + 'ஆபரேட்டர் தேர்வுப்பெட்டியை div உடன் இணைக்க பயன்படுத்தப்படும். எனவே, தேர்வுப்பெட்டியில் ஒரு செயல்பாடு செய்யப்படும் போது, அதன் பயன்பாடு div ஐ பாதிக்கும். அடுத்து, ஒளிபுகா மதிப்பை “ என அமைப்போம் 1 ”:
உள்ளீடு : சரிபார்க்கப்பட்டது + div {ஒளிபுகாநிலை : 1
}
குறிப்பு: ஒளிபுகா மதிப்பை இவ்வாறு குறிப்பிடுவோம் 1 ”, அதாவது தேர்வுப்பெட்டி குறிக்கப்படும் போது, உருவாக்கப்பட்ட டிவிட் காட்டப்படும். மேலும், div ஐ மறைக்க அதன் குறியை நீக்கவும்
நீங்கள் பார்க்க முடியும் என, '' ஐப் பயன்படுத்தி div காட்டப்பட்டு மறைக்கப்படுகிறது மாற்றம் 'சொத்து மற்றும்' : சரிபார்க்கப்பட்டது ” போலி வர்க்க உறுப்பு:
CSS இல் மாற்றம் பண்புடன் ஒரு div ஐ மறைத்து காண்பிக்கும் முறையை விளக்கியுள்ளோம்.
முடிவுரை
ஒரு பிரிவைக் காட்டவும் மறைக்கவும், ' மாற்றம் 'சொத்து மற்றும்' : சரிபார்க்கப்பட்டது 'போலி-வகுப்பு உறுப்பு, div ஒளிபுகாநிலையின் மதிப்பை அமைக்கும் விதத்தில் பயன்படுத்தப்படுகிறது' 0 ”, மற்றும் இதில் : சரிபார்க்கப்பட்ட போலி-வகுப்பு உறுப்பு, ஒளிபுகாநிலையை “ என அமைக்கவும் 1 ”. பயனர் தேர்வுப்பெட்டியைக் கிளிக் செய்யும் போது, div காட்டப்படும், அது தேர்வு செய்யப்படாதபோது, DIV மறைக்கும். இந்த கையேட்டில், மாற்றும் பண்புகளைப் பயன்படுத்தி div ஐ மறைத்து காண்பிக்கும் முறையை விவரித்துள்ளோம்.