CSS සහ SVG සජීවිකරණ ගැන මට හැකි සෑම දෙයක්ම ඉගෙන ගැනීමට අවශ්ය වූ ව්යාපෘතියක් අවසන් කිරීමෙන් පසුව, මම මෙම ලිපි මාලාව Smashing Animations සහ "How Classic Cartoons Inspire Modern CSS" ගැන ලිවීමට පටන් ගතිමි. මෙම වසර අවසන් කිරීමට, Toon මාතෘකා එතරම් බලපෑමක් ඇති කරන මූලද්රව්යය නිර්මාණය කිරීමට නවීන CSS භාවිතා කරන්නේ කෙසේදැයි ඔබට පෙන්වීමට මට අවශ්යය: ඒවායේ මුද්රණ ශිල්පය. මාතෘකාව කලා නිර්මාණ නිර්මාණය 1920 ගණන්වල සහ 30 ගණන්වල මුල් භාගයේ නිහඬ යුගයේ, චිත්රපටයේ මාතෘකා කාඩ්පතේ මුද්රණ ශිල්පය මනෝභාවයක් නිර්මාණය කර, දර්ශනය සකසා, ප්රේක්ෂකයන්ට ඔවුන් නැරඹීමට ගෙවන චිත්රපට වර්ගය පිළිබඳව මතක් කර දුන්නේය.
කාටූන් මාතෘකා කාඩ්පත් සන්නාමකරණය, මනෝභාවය සහ දර්ශන-සැකසුම ද විය, සියල්ල එකකට පෙරළිණි. මුල් වසරවලදී, ප්රධාන චිත්රාගාර අයවැය විශාල වූ විට, මෙම මාතෘකා කාඩ්පත් බොහෝ විට නිදර්ශන සහ පින්තාරු විය.
නමුත් 1950 ගණන්වල රූපවාහිනිය උත්සන්න වූ විට, අයවැය පහත වැටුණු අතර, ලෝරන්ස් "ආට්" ගෝබල් වැනි කලාකරුවන් විසින් නිර්මාණය කරන ලද කාඩ්පත් නව දෘශ්ය භාෂාවක් භාවිතා කර, වඩාත් ග්රැෆික්, ශෛලීගත සහ අඩු සංකීර්ණ බවට පත් විය. සටහන: Lawrence "Art" Goble යනු මැද ශතවර්ෂයේ ඇමරිකානු සජීවිකරණයේ බොහෝ විට නොසලකා හරින ලද වීරයන්ගෙන් එකකි. ඔහු මූලික වශයෙන් 1950 සහ 1960 ගණන්වල එහි වඩාත්ම බලගතු වසර තුළ Hanna-Barbera සඳහා වැඩ කළේය. ගොබල් චරිත සජීවිකරණ ශිල්පියෙකු නොවීය. ඔහුගේ කාර්යභාරය වූයේ වායුගෝලය නිර්මාණය කිරීමයි, එබැවින් ඔහු The Flintstones, Huckleberry Hound, Quick Draw McGraw සහ Yogi Bear සඳහා පරිසරයන් මෙන්ම ස්වරය සකස් කරන ආරම්භක මාතෘකා කාඩ්පත් ද නිර්මාණය කළේය. ඔහුගේ මාතෘකා කාඩ්පත්, ලාංඡනයක් ආවරණය කර ඇති සිතුවම්, Hanna-Barbera ගේ සංකේතාත්මක පෙනුම නිර්වචනය කිරීමට උපකාරී විය. Quick Draw McGraw සහ Yogi Bear වැනි චරිත සඳහා Goble ගේ කලා කෘති කුඩා රූපවාහිනී තිර මත ඵලදායී විය. කාටූනයේ නිශ්චල රූපයක් ප්රතිනිෂ්පාදනය කරනවා වෙනුවට, ඔහු අවධානය යොමු කළේ එහි සාරය ග්රහණය කරගත් තනි, ප්රබල අදහසක් - බොහෝ විට සිල්වට් වලින් - ඉදිරිපත් කිරීමටයි. "The Buzzin' Bear" හි යෝගී හෙලිකොප්ටරයක හඬයි. ඔහු "Bear on a Picnic" හි pic-a-nic කූඩය අතේ තබාගෙන ඉවතට පැන යන අතර ඔහුගේ "Prize Fight Fright" සඳහා යෝගී මාතෘකා පාඨය කොටු කරයි.
විශ්වාසය තැබීමට සුළු හෝ චලිතයක් නොමැතිව, ගොබල්ගේ තනි රාමුවලට මනෝභාවයක් නිර්මාණය කිරීමට, දර්ශනය සැකසීමට සහ කථාවක් විස්තර කිරීමට සිදු විය. ඔවුන් මෙය කළේ පැතලි වර්ණ, ග්රැෆික් හැඩතල සහ මුද්රණ ශිල්පය නිතර නිතර කලා කෘතිවලට අනුකලනය කරමිනි.
වෙබයේ වැඩ කරන නිර්මාණකරුවන් ලෙස, ටූන් මාතෘකා මඟින් සන්නාමයක පෞරුෂය ප්රකාශ කරන්නේ කෙසේද, පළමු හැඟීම ඇති කරන්නේ කෙසේද සහ නිෂ්පාදනයක් හෝ වෙබ් අඩවියක් භාවිතයෙන් කෙනෙකුගේ අත්දැකීමක් සඳහා අපේක්ෂාවන් සකසන්නේ කෙසේද යන්න පිළිබඳව අපට බොහෝ දේ ඉගැන්විය හැකිය. ඵලදායි බැනර්, ගොඩබෑමේ පිටු ශීර්ෂ, සහ හොඳ පැරණි ස්ප්ලෑෂ් තිර සෑදීමට කලාකරුවන්ගේ ශිල්පීය ක්රමවලින් අපට ඉගෙන ගත හැකිය. ටූන් මාතෘකා මුද්රණ ශිල්පය කාටූන් මාතෘකා කාඩ්පත් මඟින් වර්ගය රූප සමඟ ඒකාබද්ධ කිරීම ශීර්ෂයකට හෝ වීරයෙකුට අවශ්ය පහර ලබා දෙන ආකාරය පෙන්වයි. පෙළ-සෙවණ, පෙළ-පහර සහ පරිවර්තන උපක්රම අතලොස්සක් සමඟින්, නවීන CSS ඔබට එම ශක්තියම ලබා ගැනීමට ඉඩ සලසයි.
ටූන් පෙළ මාතෘකා උත්පාදක යන්ත්රය මෙම ලිපිය ලිවීමෙන් පසු, මා බෙහෙවින් ආදරය කරන කාටූන් මාතෘකා මෙන් පෙළ නිර්මාණය කිරීම සඳහා මෙවලමක් තිබීම ප්රයෝජනවත් බව මට වැටහුණි. ඉතින් මම එකක් හැදුවා. My Toon Text Title Generator ඔබට වර්ණ, පහරවල් සහ බහු අකුරු සෙවනැලි සමඟ අත්හදා බැලීමට ඉඩ සලසයි. ඔබට තීන්ත අනුපිළිවෙල සීරුමාරු කිරීමට, අකුරු පරතරය යෙදීමට, නියැදි අකුරු තෝරාගැනීමේදී ඔබේ පෙළ පෙරදසුන් කිරීමට සහ ව්යාපෘතියක භාවිතා කිරීමට ජනනය කරන ලද CSS කෙලින්ම ඔබේ පසුරු පුවරුවට පිටපත් කිරීමට හැකිය. Toon මාතෘකාව CSS ඔබට Toon Text Title Generator මඟින් ලබා දෙන CSS පිටපත් කර ඇලවිය හැක. නමුත් එය කරන්නේ කුමක්දැයි අපි සමීපව බලමු. පෙළ සෙවනැල්ල Augie Doggie ගේ "Yuk-Yuk Duck" කථාංගයේ මෙම මාතෘකාවේ වර්ගය දෙස බලන්න, එහි සුදුමැලි කහ අකුරු සහ අඳුරු, තද, ඕෆ්සෙට් සෙවනැල්ල එය පසුබිමෙන් ඉවත් කර ගැඹුරේ මායාව නිර්මාණය කරයි.
පෙළ-සෙවණ අගයන් හතරක් පිළිගන්නා බව ඔබ දැනටමත් දන්නවා ඇත: (1) තිරස් සහ (2) සිරස් ඕෆ්සෙට්, (3) නොපැහැදිලි, සහ (4) ඝන හෝ අර්ධ පාරදෘශ්ය විය හැකි වර්ණය. එම ඕෆ්සෙට් අගයන් ධන හෝ සෘණ විය හැක, ඒ නිසා මට "යූක්-යුක් තාරා" පහළට සහ දකුණට ඇදගත් තද සෙවනැල්ලක් භාවිතයෙන් අනුකරණය කළ හැක: වර්ණය: #f7f76d; පෙළ-සෙවණ: 5px 5px 0 #1e1904;
අනෙක් අතට, මෙම "පයින්ට් යෝධ" මාතෘකාව එහි සෘණ අර්ධ මෘදු සෙවනැල්ල සමඟ වෙනස් හැඟීමක් ඇත: වර්ණය: #c2a872; අකුරු සෙවන: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
අමතර ගැඹුරක් එක් කිරීමට සහ වඩාත් රසවත් බලපෑම් ඇති කිරීමට, මට සෙවනැලි කිහිපයක් ස්ථර කළ හැක. "Let's Duck Out" සඳහා මම සෙවනැලි හතරක් ඒකාබද්ධ කරමි: පළමුවැන්න පසුබිමෙන් පෙළ එසවීමට සෘණ තිරස් ඕෆ්සෙට් සහිත ඝන සෙවනැල්ලක්, පසුව එය වටා නොපැහැදිලි බවක් ඇති කිරීමට ක්රමානුකූලව මෘදු සෙවනැලි: වර්ණය: #6F4D80; අකුරු සෙවන: -5px5px 0 #260e1e, /* සෙවනැල්ල 1 */ 0 0 15px #e9ce96, /* සෙවනැල්ල 2 */ 0 0 30px #e9ce96, /* සෙවනැල්ල 3 */ 0 0 30px #e9ce96; /* සෙවනැල්ල 4 */
මෙම සෙවනැලි පෙන්නුම් කරන්නේ පෙළ-සෙවණ භාවිතා කිරීම ආලෝකකරණ ප්රයෝග නිර්මාණය කිරීම පමණක් නොවන බවයි, මන්ද ඒවා අලංකාර විය හැකි අතර පෞරුෂය එක් කළ හැකිය. පෙළ පහර බොහෝ කාටූන් මාතෘකා කාඩ්පත් පසුබිමෙන් කැපී පෙනෙන තද දළ සටහනක් සහිත අකුරු දක්වයි. මට මෙම ප්රයෝගය Text-stroke භාවිතයෙන් ප්රතිනිර්මාණය කළ හැක. දිගු කලක් තිස්සේ, මෙම දේපල ලබා ගත හැක්කේ -webkit- උපසර්ගයක් හරහා පමණි, නමුත් එයින් අදහස් වන්නේ එය දැන් නවීන බ්රව්සර් හරහා සහය දක්වන බවයි.
text-stroke යනු ගුණාංග දෙකක් සඳහා කෙටි යෙදුමකි. පළමු, පෙළ-පහර-පළල, තනි අකුරු වටා සමෝච්ඡයක් අඳින අතර, දෙවන, පෙළ-ආඝාත-වර්ණය, එහි වර්ණය පාලනය කරයි. "Whatever Goes Pup" සඳහා, මම කහ පාට පෙළට 4px නිල් පහරක් එක් කළෙමි: වර්ණය: #eff0cd; -webkit-text-stroke: 4px #7890b5; පෙළ පහර: 4px #7890b5;
ස්ට්රෝක් ඒවා සෙවනැලි සමඟ සංකලනය වූ විට විශේෂයෙන් ප්රයෝජනවත් විය හැක, එබැවින් “වර්ධනය වීම, වර්ධනය වීම, නැතිවීම” සඳහා මම මෙම ත්රිමාණ පෙළ ප්රයෝගය නිර්මාණය කිරීමට යන්තම් බොඳ වූ 1px සෙවනැල්ලකට තුනී 3px පහරක් එක් කළෙමි: වර්ණය: #fbb999; පෙළ-සෙවණ: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; පෙළ පහර: 3px #984336;
තීන්ත ඇණවුම පෙරනිමියෙන් බ්රවුසරය පිරවුමට උඩින් පහරක් අඳින බැවින්, පෙළ-ආඝාතය භාවිතා කිරීම සැමවිටම අපේක්ෂිත ප්රතිඵලය නිපදවන්නේ නැත, විශේෂයෙන් සිහින් අකුරු සහ ඝන පහරවල් සමඟ. කනගාටුවට කරුණක් නම්, මම බොහෝ විට Sketch හි කරන පරිදි ආඝාත ස්ථානගත කිරීම සීරුමාරු කිරීමට CSS තවමත් මට අවසර නොදේ. කෙසේ වෙතත්, තීන්ත-ඇණවුම් දේපලෙහි මට පිරවුම ඉදිරියෙන් නොව, පිටුපසින් පහර තැබීමට ඉඩ සලසන අගයන් ඇත.
තීන්ත-පිළිවෙල: ආඝාතය පළමුව පහර තීන්ත ආලේප කරයි, පසුව පිරවීම, නමුත් තීන්ත-පිළිවෙල: පිරවීම ප්රතිවිරුද්ධ දෙය කරයි: වර්ණය: #fbb999; තීන්ත-පිළිවෙල: පිරවීම; පෙළ-සෙවණ: 3px 5px 1px #5160b1; පෙළ-පහර-වර්ණය:#984336; පෙළ-පහර-පළල: 3px;
ඵලදායි පහරක් අකුරු කියවිය හැකි ලෙස තබා ගනී, බර එකතු කරයි, සහ - සෙවනැලි සහ තීන්ත අනුපිළිවෙල සමඟ ඒකාබද්ධ වූ විට - පැතලි අකුරු සැබෑ පැවැත්මක් ලබා දෙයි. පෙළ ඇතුළත පසුබිම් බොහෝ කාටූන් මාතෘකා කාඩ්පත් අකුරු වලට වයනය, අනුක්රමණය හෝ නිදර්ශන විස්තර එකතු කිරීම මගින් පැතලි වර්ණයෙන් ඔබ්බට යයි. සමහර විට එය වයනයකි, තවත් විටෙක එය සියුම් ස්වර මාරුවක් සහිත අනුක්රමණයක් විය හැකිය. වෙබයේ, පෙළ පිටුපස පසුබිම් රූපයක් හෝ අනුක්රමණයක් භාවිතා කර, පසුව එය අකුරුවල හැඩයට කපා දැමීමෙන් මට මෙම බලපෑම ප්රතිනිර්මාණය කළ හැක. මෙය එකට වැඩ කරන ගුණාංග දෙකක් මත රඳා පවතී: පසුබිම-ක්ලිප්: පෙළ සහ පෙළ-පිරවුම්-වර්ණ: විනිවිද පෙනෙන.
පළමුව, මම පෙළ පිටුපස පසුබිමක් යොදමි. මෙය බිට්මැප් හෝ දෛශික රූපයක් හෝ CSS අනුක්රමයක් විය හැක. Quick Draw McGraw කථාංගයේ මෙම උදාහරණය සඳහා "Baba Bait," මාතෘකා පාඨයේ අඳුරේ සිට ආලෝකය දක්වා සියුම් ඉහළ-පහළ අනුක්රමයක් ඇතුළත් වේ: පසුබිම: රේඛීය-ශ්රේණිය(0deg, #667b6a, #1d271a);
මීළඟට, මම එම පසුබිම ග්ලයිෆ් වෙත කපා, පෙළ පාරදෘශ්ය කරන අතර එමඟින් පසුබිම පෙන්වයි: -webkit-background-clip: text; -webkit-text-fill-color: විනිවිද පෙනෙන;
එම පේළි දෙක සමඟ, පසුබිම තවදුරටත් පෙළ පිටුපස පින්තාරු නොකෙරේ; ඒ වෙනුවට, එය එය තුළ පින්තාරු කර ඇත. මෙම තාක්ෂණය ස්ට්රෝක් සහ සෙවනැලි සමඟ සංයෝජනය වන විට විශේෂයෙන් හොඳින් ක්රියා කරයි. ක්ලිප් කරන ලද අනුක්රමයක් අකුරු වලට වර්ණය සහ වයනය සපයයි, පහරක් එහි දාර තියුණුව තබා ගනී, සහ සෙවනැල්ලක් එය පසුබිමෙන් ඔසවයි. එක්ව, ඔවුන් අතින් පින්තාරු කරන ලද මාතෘකා කාඩ්පත්වල ස්ථර පෙනුම ප්රතිනිර්මාණය කරන්නේ කුඩා CSS වලට වඩා වැඩි දෙයක් භාවිතා කරමිනි. සෑම විටම මෙන්, බ්රවුසරයේ විචලනයන් සමහර විට සෙවනැලි සහ විදැහුම්කරණයට බලපෑ හැකි බැවින්, ක්ලිප් කළ පෙළ ප්රවේශමෙන් පරීක්ෂා කරන්න. පෙළ තනි පුද්ගල අක්ෂරවලට බෙදීම සමහර විට මට සම්පූර්ණ වචනයක් හෝ ශීර්ෂයක් හැඩගැන්වීමට අවශ්ය නැත. මට තනි අකුරු හැඩගැන්වීමට අවශ්යයි - චරිතයක් තැනට තල්ලු කිරීමට, එක් ග්ලයිෆ් එකකට අමතර බරක් ලබා දීමට, නැතහොත් ස්වාධීනව අකුරු කිහිපයක් සජීවීකරණය කිරීමට. සරල HTML සහ CSS වලදී, එය කිරීමට ඇත්තේ එක් විශ්වාසදායක ක්රමයක් පමණි: සෑම අක්ෂරයක්ම එහිම පරාසයක මූලද්රව්යයකින් ඔතා. මට එය අතින් කළ හැකි නමුත් එය බිඳෙන සුළු, නඩත්තු කිරීමට අපහසු වන අතර පිටපත වෙනස් වූ විට ඉක්මනින් කඩා වැටෙනු ඇත. ඒ වෙනුවට, මට එක් අකුරකට පාලනය අවශ්ය වූ විට, මම splt.js වැනි පෙළ බෙදීමේ පුස්තකාලයක් භාවිතා කරමි (වෙනත් විසඳුම් ඇතත්). මෙය පෙළ නෝඩයක් ගෙන වචන හෝ අක්ෂර ස්වයංක්රීයව ඔතා, මගේ සලකුණු කිරීම අවුල් නොකර සජීවී කිරීමට සහ මෝස්තර කිරීමට මට අමතර කොකු ලබා දෙයි. එය සම්භාව්ය කාටූන් මාතෘකා කාඩ්පත්වල ඔබ දකින අසමාන, ලාක්ෂණික මුද්රණ ශිල්පය ප්රතිනිර්මාණය කිරීමට මට අවශ්ය සියුම් පාලනයක් ලබා දෙන අතරම, මගේ HTML කියවිය හැකි සහ අර්ථකථනය කරන ප්රවේශයකි. කෙසේ වෙතත්, මෙම ප්රවේශය පැමිණේප්රවේශ්යතා අවවාද, බොහෝ තිර කියවන්නන් පෙළ නෝඩ් අනුපිළිවෙලින් කියවන බැවින්. එබැවින් මෙය:
හම් ස්වීට් හම්
…ඔබ බලාපොරොත්තු වන පරිදි කියවයි: හම් ස්වීට් හම්
නමුත් මෙය:
H u m
…බ්රවුසරය සහ තිර කියවනය අනුව වෙනස් ලෙස අර්ථ දැක්විය හැක. ඇතැමෙක් අකුරු ගලපමින් වචන නිවැරදිව කියවයි. අනෙක් අය අකුරු අතර විරාමයක් තැබිය හැක, නරකම අවස්ථාවක එය මෙසේ විය හැකිය: "එච්..." "උ..." "එම්..."
කනගාටුවට කරුණක් නම්, සමහර බෙදීම් විසඳුම් සෑම විටම ප්රවේශ විය හැකි ප්රතිඵලයක් ලබා නොදේ, එබැවින් මම දැනට බීටා හි ඇති splinter.js, මගේම පෙළ බෙදීමක් ලියා ඇත. තනි අකුරු පරිවර්තනය කිරීම මගේ Toon Text Splitter සක්රිය කිරීමට, මට බෙදීමට අවශ්ය මූලද්රව්යයට මම දත්ත-උපලක්ෂණයක් එක් කරමි:
Hum Sweet Hum
පළමුව, මගේ ස්ක්රිප්ටය සෑම වචනයක්ම තනි අකුරුවලට වෙන් කර ඒවා පන්ති සහ ARIA උපලක්ෂණ යෙදූ ස්පාන් මූලද්රව්යයකින් ඔතා:
පසුව ස්ක්රිප්ට් බෙදුම් මූලද්රව්යයේ මූලික අන්තර්ගතය ගෙන එය ප්රවේශ්යතාව පවත්වා ගැනීමට උදවු කිරීමට aria ගුණාංගයක් ලෙස එක් කරයි:
එම පන්ති ගුණාංග යෙදීමත් සමඟ, මට පසුව මා තෝරා ගන්නා පරිදි තනි චරිත හැඩගස්වාගත හැක.
උදාහරණයක් ලෙස, "හම් ස්වීට් හම්" සඳහා, එහි අකුරු මූලික රේඛාවෙන් ඉවතට මාරු වන ආකාරය අනුකරණය කිරීමට මට අවශ්යය. මගේ Toon Text Splitter භාවිතා කිරීමෙන් පසු, මම අර්ධ අහඹු පෙනුමක් නිර්මාණය කිරීම සඳහා:nth-child තේරීම් කිහිපයක් භාවිතා කරමින් විවිධ පරිවර්තන අගයන් හතරක් යෙදුවෙමි: /* 4, 8, 12... */ .toon-char:nth-child(4n) { පරිවර්තනය: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) {translate: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) {translate: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {translate: 0 8px; }
නමුත් පරිවර්තනය යනු මගේ ටූන් පෙළ පරිවර්තනය කිරීමට මට භාවිතා කළ හැකි එක් දේපලක් පමණි.
ඊටත් වඩා අවුල් සහගත පෙනුමක් සඳහා මට එම තනි චරිත කරකැවිය හැකිය: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) {භ්රමණය: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) {භ්රමණය: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) {භ්රමණය: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {භ්රමණය: 8deg; }
නමුත් පරිවර්තනය යනු මගේ ටූන් පෙළ පරිවර්තනය කිරීමට මට භාවිතා කළ හැකි එක් දේපලක් පමණි. ඊටත් වඩා අවුල් සහගත පෙනුමක් සඳහා මට එම තනි චරිත කරකැවිය හැකිය: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { කරකවන්න: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { කරකවන්න: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { කරකවන්න: 4deg; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { කරකවන්න: 8deg; }
තවද, ඇත්ත වශයෙන්ම, මට එම චරිත විහිළු කිරීමට සහ මගේ ටූන් පෙළ විලාස මාතෘකා ජීවමාන කිරීමට සජීවිකරණ එකතු කළ හැකිය. පළමුව, මම අක්ෂර භ්රමණය වන යතුරු රාමු සජීවිකරණයක් නිර්මාණය කළෙමි:
@keyframes jiggle { 0%, 100% {transform: rotate(var(--base-rotate, 0deg)); } 25% {transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% {transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
මගේ Toon Text Splitter විසින් නිර්මාණය කරන ලද span මූලද්රව්ය වෙත එය යෙදීමට පෙර: .toon-char { සජීවීකරණය: jiggle 3s infinite Ease-in-out; පරිවර්තනය-සම්භවය: මැද පතුලේ; }
අවසාන වශයෙන්, එක් එක් අක්ෂරය විහිළු කිරීමට පටන් ගැනීමට පෙර භ්රමණ ප්රමාණය සහ ප්රමාදයක් සැකසීම: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { animation-delay: 0.3s; } .toon-char:nth-child(4n+2) { animation-delay: 0.5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
හැඟීමක් ඇති කිරීමට එක් රාමුවක් කාටූන් මාතෘකා ශිල්පීන්ට හැඟීමක් ඇති කිරීමට එක් රාමුවක් තිබූ අතර, ඔවුන්ගේ මුද්රණ ශිල්පය ඔවුන් පින්තාරු කළ කලා කෘති තරම්ම වැදගත් විය. වෙබ් එකෙත් එහෙමයි. හොඳින් සැලසුම් කළ ශීර්ෂයක් හෝ වීරයෙක්ප්රදේශයට පැහැදිලිකම, චරිතය සහ විශ්වාසය අවශ්ය වේ - හුදෙක් වියැකී ගිය සම්පූර්ණ පළල පසුබිම් රූපයක් නොවේ. ප්රවේශමෙන් තෝරාගත් CSS ගුණාංග කිහිපයක් සමඟ - සෙවනැලි, පහරවල්, ක්ලිප් කළ පසුබිම් සහ සමහර සංයමයෙන් යුත් සජීවිකරණ - අපට එම බලපෑමම ප්රතිනිර්මාණය කළ හැකිය. මම ටූන් අකුරු වලට ඇලුම් කරන්නේ මම නොස්ටැල්ජික් නිසා නොව, එහි නිර්මාණය චේතනාන්විත නිසා ය. හිතාමතා තේරීම් කරන්න, සහ කුඩා ටූන් අකුරු මුද්රණ ශිල්පයට ඔබේ නිර්මාණවලට පන්ච් එක් කිරීමට ඉඩ දෙන්න.
