ஒரு வலைப்பக்கத்தில் உள்ள அனிமேஷன்கள் அதிக பயனர்களை ஈர்க்கும். இதை நீங்களே கேட்டுக்கொள்ளுங்கள் - கொஞ்சம் அனிமேஷன் கொண்ட ஒரு வலைப்பக்கத்தை நீங்கள் காண விரும்பினால், நீங்கள் மேலும் ஆராய விரும்பவில்லையா? இப்போது, CSS மாற்றங்களுடன் உங்கள் வேலையை சில சிறந்த அனிமேஷன்களுடன் உயிர்ப்பிக்க முடியும். மேலும், நீங்கள் நினைவில் கொள்ளுங்கள், இவை சரியாக செய்யப்பட வேண்டும். பின்வரும் வரிசையில் CSS மாற்றங்களின் உலகத்தை ஆராய்வோம்:
- CSS மாற்றங்கள் ஏன்?
- மாற்றம் சொத்து
- நீங்கள் என்ன குறிப்பிட வேண்டும்?
- மாற்றம்-நேர-செயல்பாடு செயல்பாடு சொத்து
- மாற்றம்-தாமத சொத்து
CSS மாற்றங்கள் ஏன்?
ஒரு உதாரணத்தை எடுத்துக் கொள்வோம். ஒரு தனிமத்தின் நிறத்தை நீங்கள் வெள்ளை நிறத்தில் இருந்து நீல நிறமாக மாற்றினால், இந்த மாற்றம் கிட்டத்தட்ட உடனடியாக நிகழ்கிறது. மேலும் அனிமேஷன் விளைவுக்கு, இந்த மாற்றத்தை படிப்படியாக நீங்கள் செய்யலாம். இது மிகவும் பார்வைக்கு ஈர்க்கும். CSS மாற்றங்களை இயக்குவதன் மூலம், மாற்றங்கள் நிகழும் வழியை நீங்கள் தனிப்பயனாக்கலாம். முடுக்கம் வளைவைப் பின்பற்றும் குறிப்பிட்ட நேர இடைவெளியில் உறுப்புகளின் மாற்றங்கள் எவ்வாறு நிகழ்கின்றன என்பதை நீங்கள் வரையறுக்கலாம்.
CSS மாற்றங்கள் மாற்றங்களை வரையறுக்க உங்களை அனுமதிக்கின்றன கூறுகள், குறிப்பிட்ட நேர இடைவெளிகள், முடுக்கம் வளைவின் வேகம் மற்றும் பல. ஃப்ளாஷ் அல்லது பயன்படுத்தாமல் இவை அனைத்தையும் செய்யலாம் ஜாவாஸ்கிரிப்ட் .
சிறந்த புரிதலுக்கு, கீழே உள்ள படத்தை நீங்கள் குறிப்பிடலாம்:
மேலே உள்ள படத்தில், ஒரு நொடியில் HTML உறுப்பு சிவப்பு நிறத்தில் இருந்து நீலமாக மாறும். மாற்றம் நிகழும்போது இடைநிலை நிறத்தையும் நீங்கள் காண்பீர்கள். நீங்கள் CSS மாற்றங்களைப் பயன்படுத்தப் போவதில்லை என்றால், சிவப்பு நிறத்தில் இருந்து நீல நிறத்தில் மாற்றம் உடனடியாக இருப்பதை நீங்கள் கவனிப்பீர்கள் - இடைநிலை நிறத்தை நீங்கள் காண மாட்டீர்கள். CSS மாற்றங்களுடன், HTML கூறுகள் பழைய நிலையிலிருந்து புதியதாக மாறும்போது அனிமேஷன் விளைவை நீங்கள் காண்பீர்கள்.
மாற்றம் சொத்து
CSS மாற்றங்களைக் கட்டுப்படுத்த நீங்கள் சுருக்கெழுத்து மாற்றம் சொத்தைப் பயன்படுத்தலாம். இந்த சுருக்கெழுத்தின் பயன்பாடு எளிதானது மட்டுமல்ல, ஒத்திசைவுக்கு வெளியே உள்ள அளவுருக்களையும் இது தவிர்க்கலாம், இது CSS இல் பிழைத்திருத்தத்திற்கு மிகவும் வெறுப்பாக இருக்கும்.
மாற்றம்-சொத்து நீங்கள் மாற்றும் விளைவை விரும்பும் CSS பண்புகளைக் குறிப்பிடுகிறது. இந்த CSS பண்புகள் மட்டுமே அனிமேஷன் செய்யப்பட்டவை.
தொடரியல்:
மாற்றம்:
ஒரு தொடக்கநிலையாளராக, சுருக்கெழுத்தைப் பயன்படுத்துவதில் சில சிக்கல்களை நீங்கள் சந்திக்க நேரிடும். சுருக்கெழுத்தைப் பயன்படுத்துவது இப்போது உங்களுக்கு கொஞ்சம் சிக்கலானது என்று நீங்கள் நினைத்தால், மாற்றம் பண்புகளை தனித்தனியாக குறிப்பிடலாம். ஒரு HTML உறுப்புக்கு, கீழேயுள்ள எடுத்துக்காட்டில் காட்டப்பட்டுள்ளபடி மாற்றம் பண்புகளை ஒவ்வொன்றாக குறிப்பிடலாம்:
div {அகலம்: 100px உயரம்: 100px பின்னணி: லைட்ப்ளூ மாற்றம்-சொத்து: அகல மாற்றம்-காலம்: 2s மாற்றம்-நேர-செயல்பாடு: நேரியல் மாற்றம்-தாமதம்: 1s} div: மிதவை {அகலம்: 300px}பெட்டியின் மேல் வட்டமிடுக
ஜாவாவில் சரம் தேதி வடிவத்திற்கு மாற்றவும்
மேலே உள்ள எடுத்துக்காட்டில், பண்புகள் (மாற்றம்-சொத்து, மாற்றம்-காலம், மாற்றம்-நேர-செயல்பாடு மற்றும் மாற்றம்-தாமதம்) மற்றும் அவற்றின் மதிப்புகளை தனித்தனியாகக் குறிப்பிட்டுள்ளோம். இந்த மாற்றம் பண்புகளைப் பற்றி விரைவில் அறிந்து கொள்வோம்.
________ வரிசையில் ________ தொகுப்பை ஏற்பாடு செய்ய ஒரு வரிசையாக்க வழிமுறை பயன்படுத்தப்படலாம்.
நீங்கள் என்ன குறிப்பிட வேண்டும்?
CSS மாற்றங்களை உருவாக்க நீங்கள் குறிப்பிட வேண்டிய இரண்டு விஷயங்கள் உள்ளன: ஒரு விளைவைச் சேர்க்க விரும்பும் CSS சொத்து மற்றும் அந்த விளைவின் கால அளவு.நீங்கள் ஒரு விஷயத்தை மனதில் கொள்ள வேண்டும் - நீங்கள் கால அளவைக் குறிப்பிடாதபோது, மாற்றம் இயல்புநிலை மதிப்பை எடுக்கும் 0 , எந்த விளைவும் இருக்காது.
ஒரு உதாரணத்தைக் கருத்தில் கொள்வோம்:
ஐந்து வினாடிகளுக்கு அகல சொத்தின் மாற்றம் விளைவை கீழே உள்ள குறியீடு வரையறுக்கிறது.
div {அகலம்: 100px உயரம்: 100px பின்னணி: நீல மாற்றம்: அகலம் 5s} div: மிதவை {அகலம்: 600px}மாற்றம் விளைவைக் காண, மேலே உள்ள div உறுப்புக்கு மேல் கர்சரை நகர்த்தவும்.
மேலே உள்ள குறியீட்டில், உங்கள் கர்சரை நீல பெட்டியின் மீது வட்டமிடும்போது, நீல பெட்டி அதன் அகலத்தை படிப்படியாக ஐந்து விநாடிகளுக்கு அதிகரிக்கிறது. நீங்கள் நீல பெட்டியிலிருந்து கர்சரை அகற்றும்போது, நீல பெட்டி படிப்படியாக அதன் அசல் அளவுக்கு திரும்பும் (உடனடியாக அல்ல). இந்த மாற்றம் சொத்து HTML உறுப்பை எவ்வாறு பாதிக்கிறது என்பதைக் காண அகலம் மற்றும் நேரத்திற்கான மதிப்புகளையும் நீங்கள் மாற்றலாம்.
ஒன்றுக்கு மேற்பட்ட சொத்துக்களுக்கு மாற்றும் விளைவையும் நீங்கள் சேர்க்கலாம். பண்புகளை பிரிக்க காற்புள்ளிகளைப் பயன்படுத்துவதன் மூலம் நீங்கள் அவ்வாறு செய்யலாம். ஒரு உதாரணத்தைக் கருத்தில் கொள்வோம்:
கீழேயுள்ள குறியீட்டில், அகலம், உயரம் மற்றும் மாற்றத்திற்காக மாற்றம் சொத்து குறிப்பிடப்பட்டுள்ளது.
div {padding: 15px அகலம்: 150px உயரம்: 100px பின்னணி: பச்சை மாற்றம்: அகலம் 2s, உயரம் 2s, உருமாற்றம் 2s} div: hover {width: 300px height: 200px உருமாற்றம்: சுழற்று (360deg)} ஹலோ வேர்ல்ட் (ஹோவர் ஓவர் மீ)
மேலே உள்ள எடுத்துக்காட்டுடன், நீங்கள் பெட்டியின் மேல் வட்டமிடும்போது பச்சை பெட்டி எவ்வாறு நகரும் என்பதைக் காண்பீர்கள்.
சொத்து மற்றும் நேர காலத்தை மட்டுமே நாங்கள் குறிப்பிட்டுள்ளோம். பல்வேறு எடுத்துக்காட்டுகளுடன் மற்ற அளவுருக்களைப் பார்ப்போம்.
மாற்றம்-நேர-செயல்பாடு செயல்பாடு சொத்து
இந்த சொத்து மாற்றம் விளைவுக்கான வேக வளைவை வரையறுக்கிறது. இது பின்வரும் மதிப்புகளை எடுக்கலாம்:
- எளிதான மதிப்பு: இயல்புநிலை மதிப்பு இது, விளைவு ஆரம்பத்தில் மெதுவாகவும், பின்னர் வேகமாகவும் மெதுவாக முடிவடையும்.
- நேரியல் மதிப்பு: இந்த விளைவு மாற்றத்தின் வேகத்தில் மாறுபடாது - இது தொடக்கத்திலிருந்து இறுதி வரை வேகத்தை சீராக வைத்திருக்கிறது.
- எளிதான மதிப்பு: இந்த விளைவு மெதுவாக தொடங்குகிறது.
- எளிதான மதிப்பு: இந்த விளைவு மெதுவான முடிவைக் கொண்டுள்ளது.
- எளிதில் வெளியேறும் மதிப்பு: இந்த விளைவு மெதுவான தொடக்கத்தையும் மெதுவான முடிவையும் கொண்டுள்ளது.
- கியூபிக்-பெஜியர் மதிப்பு (n, n, n, n): கியூபிக்-பெஜியர் செயல்பாட்டில் உங்கள் சொந்த மதிப்புகளின் தொகுப்பைக் குறிப்பிடலாம்.
கீழேயுள்ள குறியீடு நேரியல், எளிமை, எளிதாக்குதல், எளிதாக்குதல் மற்றும் எளிதான மதிப்புகள் ஆகியவற்றிற்கான மாற்றம் விளைவுகளைக் காட்டுகிறது.
div {width: 100px height: 100px background: இளஞ்சிவப்பு மாற்றம்: அகலம் 2s} # div1 {மாற்றம்-நேர-செயல்பாடு: நேரியல்} # div2 {மாற்றம்-நேர-செயல்பாடு: எளிதானது} # div3 {மாற்றம்-நேர-செயல்பாடு: எளிதானது } # div4 {மாற்றம்-நேர-செயல்பாடு: எளிதில் வெளியேறு} # div5 {மாற்றம்-நேர-செயல்பாடு: எளிதில் வெளியேறு} div: மிதவை {அகலம்: 300px}கீழே உள்ள div கூறுகளின் மேல் வட்டமிடுக
நேரியல்
எளிதாக
எளிதானது
எளிதானது
எளிதில் வெளியே
மாற்றம்-தாமத சொத்து
சில நேரங்களில், ஒரு குறிப்பிட்ட காலத்திற்குப் பிறகு அனிமேஷன் ஏற்பட வேண்டும் என்று நீங்கள் விரும்புகிறீர்கள். மாற்றம்-தாமத சொத்து ஒரு மாற்றம் விளைவுக்கான தாமதத்தைக் குறிப்பிட உங்களை அனுமதிக்கிறது. தாமதத்தை நொடிகளில் குறிப்பிடலாம்.
மாற்றம் விளைவின் தாமதத்தைக் காண ஒரு எடுத்துக்காட்டு எடுத்துக்கொள்வோம்:
div {width: 100px height: 100px background: மஞ்சள் மாற்றம்: அகலம் 3s மாற்றம்-தாமதம்: 1s} div: hover {width: 300px}கீழே உள்ள div உறுப்பு மீது வட்டமிடுக
குறிப்பு: விளைவு தொடங்குவதற்கு முன்பு 1 வினாடி தாமதத்தை நீங்கள் அவதானிக்கலாம்
php mysql_fetch_array
மேலே உள்ள குறியீட்டில், உங்கள் கர்சருடன் மஞ்சள் பெட்டியின் மீது வட்டமிடும்போது, எந்த விளைவும் இல்லை என்பதை நீங்கள் கவனிப்பீர்கள் (ஒரு நொடி). ஒரு விநாடி காத்திருந்த பிறகு, அதன் விளைவை நீங்கள் காண்பீர்கள்.
இதன் மூலம், இந்த CSS மாற்றங்கள் கட்டுரையின் முடிவுக்கு வருகிறோம். நீங்கள் இப்போது உங்கள் வலைப்பக்கங்களில் அனிமேஷன்களைச் சேர்க்கலாம். இந்த எடுத்துக்காட்டுகளை முயற்சிக்கவும்.
எங்கள் பாருங்கள் இது பயிற்றுவிப்பாளர் தலைமையிலான நேரடி பயிற்சி மற்றும் நிஜ வாழ்க்கை திட்ட அனுபவத்துடன் வருகிறது. இந்த பயிற்சி பின்-முனை மற்றும் முன்-வலை வலை தொழில்நுட்பங்களுடன் பணிபுரியும் திறன்களில் நீங்கள் தேர்ச்சி பெறுகிறது. வலை அபிவிருத்தி, jQuery, கோணல், நோட்ஜெஸ், எக்ஸ்பிரஸ்ஜேஎஸ் மற்றும் மோங்கோடிபி பற்றிய பயிற்சி இதில் அடங்கும்.
எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? 'CSS மாற்றம்' வலைப்பதிவின் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.