මම මෑතකදී මගේ වෙබ් අඩවියේ සජීවිකරණ ග්රැෆික්ස් නව තේමාවක් සහ පුරෝගාමී චරිත සමූහයක් සමඟ නැවුම් කළ අතර, මම මෙම ලිපි මාලාවේ බෙදාගත් ශිල්පීය ක්රම බොහොමයක් ක්රියාවට නංවා ඇත්තෙමි. මගේ සජීවිකරණ කිහිපයක් යමෙකු ඔවුන් සමඟ අන්තර් ක්රියා කරන විට හෝ දවසේ විවිධ වේලාවන්හි පෙනුම වෙනස් කරයි.
මගේ බ්ලොග් පිටුවේ ඇති ග්රැෆික් වල වර්ණ සෑම දිනකම උදේ සිට රාත්රිය දක්වා වෙනස් වේ. ඉන්පසුව, හිම ප්රකාරය ඇත, එය ශීත වර්ණ සහ ශීත තේමාවක් එක් කරයි, උඩැතිරි තට්ටුවක් සහ මිශ්ර කිරීමේ මාදිලියේ අනුග්රහයෙනි.
මෙය මත වැඩ කරන අතරතුර, ක්රියාවලිය සරල කරන අතරම CSS සාපේක්ෂ වර්ණ අගයන් මට වැඩි පාලනයක් ලබා දිය හැකිද යන්න මම කල්පනා කිරීමට පටන් ගතිමි. සටහන: මෙම නිබන්ධනයේදී, මම සාපේක්ෂ වර්ණ අගයන් සහ තේමා ග්රැෆික්ස් සහ සජීවිකරණ සඳහා OKLCH වර්ණ අවකාශය කෙරෙහි අවධානය යොමු කරමි. ඔබට සාපේක්ෂ වර්ණයට ගැඹුරට කිමිදීමට අවශ්ය නම්, අහමඩ් ෂදීඩ් විශිෂ්ට අන්තර්ක්රියාකාරී මාර්ගෝපදේශයක් නිර්මාණය කළේය. වර්ණ අවකාශයන්, ගැමට් සහ OKLCH සම්බන්ධයෙන්, අපේම ජෙෆ් ග්රැහැම් ඒවා ගැන ලිවීය.
මූලද්රව්ය නැවත නැවත භාවිතා කිරීම ප්රධාන විය. හැකි සෑම විටම පසුබිම් නැවත භාවිතා කරන ලදී, විශාලන සහ උඩැතිරි මගින් එකම කලා කෘතිවලින් නව දර්ශන ගොඩනැගීමට උපකාරී වේ. එය අවශ්යතාවයෙන් උපත ලැබූ නමුත් එය තනි පුද්ගල දර්ශනවලට වඩා මාලාවක් අනුව සිතීමට ද දිරිමත් කළේය. වර්ණ පුවරු අතින් යාවත්කාලීන කිරීමේ ගැටලුව අපි කෙලින්ම මගේ අභියෝගයට යමු. මෙවැනි Toon මාතෘකා තුළ — 1959 Yogi Bear Show කථාංගය “Lullabye-Bye Bear” මත පදනම්ව — සහ මගේ වැඩ සාමාන්යයෙන්, palettes තෝරාගත් වර්ණ කිහිපයකට සීමා වේ.
මම තවත් වර්ණ එකතු නොකර palette පුළුල් කිරීමට මගේ "පදනම" වර්ණය ලෙස හඳුන්වන දෙයින් සෙවන සහ ටින්ට් නිර්මාණය කරමි.
Sketch හි, මම HSL වර්ණ අවකාශයේ වැඩ කරමි, එබැවින් මෙම ක්රියාවලියට මගේ පදනම් වර්ණයේ සැහැල්ලු අගය වැඩි කිරීම හෝ අඩු කිරීම ඇතුළත් වේ. අවංකවම, එය දුෂ්කර කාර්යයක් නොවේ - නමුත් වෙනස් පදනම් වර්ණයක් තෝරා ගැනීම සඳහා සම්පූර්ණයෙන්ම නව සෙවන සහ ටින්ට් නිර්මාණය කිරීම අවශ්ය වේ. එය අතින්, නැවත නැවතත්, ඉක්මනින් වෙහෙසකාරී වේ.
මම HSL - H (හුව), S (සන්තෘප්තිය) සහ L (සැහැල්ලු බව) - වර්ණ අවකාශය ගැන සඳහන් කළ නමුත් එය වර්ණය විස්තර කිරීමට ක්රම කිහිපයකින් එකක් පමණි. RGB - R (රතු), G (කොළ), B (නිල්) - සමහර විට වඩාත්ම හුරුපුරුදුය, අවම වශයෙන් එහි Hex ආකාරයෙන්. LAB - L (සැහැල්ලු බව), A (කොළ-රතු), B (නිල්-කහ) - සහ නව, නමුත් දැන් පුළුල් ලෙස සහාය දක්වන LCH - L (සැහැල්ලු බව), C (chroma), H (hue) - ආකෘතිය එහි OKLCH ආකාරයෙන් ඇත. LCH සමඟ - විශේෂයෙන් CSS හි OKLCH - මට මගේ අත්තිවාරම් වර්ණයේ සැහැල්ලු අගය සකස් කළ හැකිය.
නැතිනම් මට එහි ක්රෝමා වෙනස් කළ හැක. LCH chroma සහ HSL සන්තෘප්තිය යන දෙකම වර්ණයක තීව්රතාවය හෝ පොහොසත්කම විස්තර කරයි, නමුත් ඒවා විවිධ ආකාරවලින් කරයි. LCH මට පුළුල් පරාසයක් සහ වර්ණ අතර වඩාත් පුරෝකථනය කළ හැකි මිශ්රණයක් ලබා දෙයි.
එකම සැහැල්ලුබව සහ ක්රෝමා අගයන් බෙදා ගන්නා වර්ණ මාලාවක් සෑදීමට මට පැහැය වෙනස් කළ හැක. HSL සහ LCH යන දෙකෙහිම, වර්ණ වර්ණාවලිය රතු පැහැයෙන් ආරම්භ වී, කොළ සහ නිල් හරහා ගමන් කර, රතු පැහැයට නැවත පැමිණේ.
OKLCH වෙනස් කළේ ඇයි මම වර්ණය ගැන සිතන ආකාරය OKLCH වර්ණ අවකාශය සඳහා බ්රවුසර සහය දැන් පුලුල්ව පැතිරී ඇත, නිර්මාණ මෙවලම් - Sketch ඇතුළුව - හසු වී නැත. වාසනාවකට මෙන්, එය OKLCH භාවිතා කිරීමෙන් ඔබව වළක්වන්නේ නැත. බ්රව්සර් ඔබ වෙනුවෙන් Hex, HSL, LAB, සහ RGB අගයන් සතුටින් OKLCH බවට පරිවර්තනය කරයි. ඔබට Hex ඇතුළුව ඕනෑම අවකාශයක පදනම් වර්ණයක් සහිත CSS අභිරුචි දේපලක් අර්ථ දැක්විය හැක: /* පදනම් වර්ණය */ --පදනම: #5accd6;
එයින් ලබාගත් ඕනෑම වර්ණ ස්වයංක්රීයව OKLCH බවට පරිවර්තනය වේ: --foundation-light: oklch(var(--foundation) වෙතින් [...]; } --foundation-mid: oklch(var(--foundation) වෙතින් [...]; } --foundation-dark: oklch(var(--Foundation) වෙතින් [...]; }
නිර්මාණ පද්ධතියක් ලෙස සාපේක්ෂ වර්ණය සාපේක්ෂ වර්ණය ගැන සිතන්න: "මෙම වර්ණය ගන්න, එය වෙනස් කරන්න, පසුව මට ප්රතිඵලය දෙන්න." වර්ණයක් සකස් කිරීමට ක්රම දෙකක් තිබේ: නිරපේක්ෂ වෙනස්කම් සහ සමානුපාතික වෙනස්කම්. ඒවා කේතයෙන් සමාන බව පෙනේ, නමුත් ඔබ අත්තිවාරම් වර්ණ මාරු කිරීමට පටන් ගත් පසු ඉතා වෙනස් ලෙස හැසිරේ. සාපේක්ෂ වර්ණය භාවිතා කිරීම පද්ධතියක් බවට පත් කළ හැක්කේ එම වෙනස වටහා ගැනීමයි. /* පදනම් වර්ණය */ --පදනම: #5accd6;
උදාහරණයක් ලෙස, මගේ අත්තිවාරම් වර්ණයේ සැහැල්ලු අගය 0.7837 වන අතර අඳුරු අනුවාදයක අගය 0.5837 වේ. වෙනස ගණනය කිරීම සඳහා, මම ඉහළ අගයෙන් පහළ අගය අඩු කර calc() ශ්රිතයක් භාවිතයෙන් ප්රතිඵලය යොදමි: --පදනම-අඳුරු: oklch(var(--පදනම) වෙතින් calc (l - 0.20) c h);
සැහැල්ලු වර්ණයක් ලබා ගැනීම සඳහා, මම ඒ වෙනුවට වෙනස එකතු කරමි: --පදනම-ආලෝකය: oklch(var(--පදනම) වෙතින් calc (l + 0.10) c h);
ක්රෝමාගැලපීම් එකම ක්රියාවලිය අනුගමනය කරයි. මගේ අත්තිවාරම් වර්ණයේ තීව්රතාවය 0.1035 සිට 0.0035 දක්වා අඩු කිරීමට, මම එක් අගයක් අනෙකෙන් අඩු කරමි: oklch(var(--පදනම) වෙතින් l calc (c - 0.10) h);
වර්ණ මාලාවක් සෑදීමට, මම මගේ අත්තිවාරම් වර්ණයේ (200) වර්ණ අගය සහ මගේ නව පැහැය (260) අතර වෙනස ගණනය කරමි: oklch(var(--පදනම) වෙතින් l c calc (h + 60));
එම ගණනය කිරීම් නිරපේක්ෂ වේ. මම ස්ථාවර මුදලක් අඩු කරන විට, මම ඵලදායී ලෙස කියමි, "සෑම විටම මෙතරම් අඩු කරන්න." ස්ථාවර අගයන් එකතු කිරීමේදී එයම අදාළ වේ: calc (c - 0.10) calc (c + 0.10)
මම මේ ප්රවේශයේ සීමාවන් අමාරුවෙන් ඉගෙන ගත්තා. මම ස්ථාවර ක්රෝමා අගයන් අඩු කිරීම මත විශ්වාසය තැබූ විට, මම අත්තිවාරම වෙනස් කළ විගසම වර්ණ අළු පැහැයට ඇද වැටුණි. එක පාටකට වැඩ කරපු palette එකක් තවත් පාටකට කඩා වැටුණා. ගුණ කිරීම වෙනස් ලෙස හැසිරේ. මම ක්රෝමා ගුණ කරන විට, මම බ්රවුසරයට කියනවා: "මෙම වර්ණයේ තීව්රතාවය සමානුපාතයකින් අඩු කරන්න." අත්තිවාරම වෙනස් වන විට පවා වර්ණ අතර සම්බන්ධතාවය නොවෙනස්ව පවතී: calc (c * 0.10)
My Move It, Scale It, Rotate It Rules
සැහැල්ලුබව චලනය කරන්න (එකතු කිරීම හෝ අඩු කිරීම), පරිමාණ ක්රෝමා (ගුණ කිරීම), වර්ණය කරකවන්න (අංශක එකතු කරන්න හෝ අඩු කරන්න).
මූලික වර්ණයට සමානුපාතිකව සිටීමට මට තීව්රතා වෙනස්කම් අවශ්ය නිසා මම chroma පරිමාණය කරමි. වර්ණ සම්බන්ධතා භ්රමණ වේ, එබැවින් වර්ණ ගුණ කිරීම තේරුමක් නැත. සැහැල්ලු බව සංජානනීය සහ නිරපේක්ෂ වේ - එය ගුණ කිරීම බොහෝ විට අමුතු ප්රතිඵල ඇති කරයි.
එක් වර්ණයක සිට සම්පූර්ණ තේමාවක් දක්වා සාපේක්ෂ වර්ණය මට අත්තිවාරම් වර්ණයක් නිර්වචනය කිරීමට සහ මට අවශ්ය අනෙකුත් සෑම වර්ණයක්ම ජනනය කිරීමට ඉඩ සලසයි - පිරවුම්, පහරවල්, අනුක්රමණ නැවතුම්, සෙවනැලි - එයින්. එම අවස්ථාවේදී, වර්ණය තාලයක් වීම නවතා පද්ධතියක් වීමට පටන් ගනී. SVG නිදර්ශන පිරවුම්, පහර සහ අනුක්රමණය හරහා එකම වර්ණ කිහිපයක් නැවත භාවිතා කිරීමට නැඹුරු වේ. සාපේක්ෂ වර්ණය ඔබට එම සබඳතා එක් වරක් නිර්වචනය කිරීමට සහ ඒවා සෑම තැනකම නැවත භාවිතා කිරීමට ඉඩ සලසයි - සජීවිකරණ ශිල්පීන් නව දර්ශන නිර්මාණය කිරීමට පසුබිම් නැවත භාවිතා කළාක් මෙන්.
අත්තිවාරම් වර්ණය එක් වරක් වෙනස් කරන්න, සහ සෑම ව්යුත්පන්න වර්ණයක්ම අතින් කිසිවක් නැවත ගණනය නොකර ස්වයංක්රීයව යාවත්කාලීන වේ. සජීවිකරණ ග්රැෆික්ස් වලින් පිටත, බොත්තම් සහ සබැඳි වැනි අන්තර්ක්රියාකාරී මූලද්රව්යවල තත්වයන් සඳහා වර්ණ නිර්වචනය කිරීමට මට මෙම ප්රවේශයම භාවිතා කළ හැකිය. මගේ "Lullabye-Bye Bear" Toon මාතෘකාවේ මම භාවිතා කළ පදනමේ වර්ණය සයන්-පෙනෙන නිල් පාටයි. පසුබිම මගේ අත්තිවාරම සහ අඳුරු අනුවාදයක් අතර රේඩියල් අනුක්රමණයකි.
සම්පූර්ණයෙන්ම වෙනස් මනෝභාවයන් සහිත විකල්ප අනුවාද නිර්මාණය කිරීමට, මට අවශ්ය වන්නේ අත්තිවාරම් වර්ණය වෙනස් කිරීම පමණි: --පදනම: #5accd6; --grad-end: var(--Foundation); --grad-start: oklch(var (--foundation) වෙතින් calc (l - 0.2357) calc (c * 0.833) h);
වර්ණ අගයන් අනුපිටපත් කිරීමකින් තොරව එම අභිරුචි ගුණාංග මගේ SVG අනුක්රමයට බැඳීමට, මම දෘඪ-කේතගත නැවතුම්-වර්ණ අගයන් පේළිගත මෝස්තර සමඟ ප්රතිස්ථාපනය කළෙමි:
මීළඟට, මගේ ටූන් පෙළ සෑම විටම මා තෝරන කුමන පදනමේ වර්ණය සමඟ ප්රතිවිරුද්ධ බව සහතික කිරීමට මට අවශ්ය විය. අංශක 180ක වර්ණ භ්රමණයක් අනුපූරක වර්ණයක් නිපදවයි, එය නිසැකවම මතු වේ - නමුත් අපහසුවෙන් කම්පනය විය හැක: .පෙළ-ආලෝකය { පුරවන්න: oklch(var(--foundation) වෙතින් l c calc (h + 180)); }
90° මාරුවක් සම්පූර්ණයෙන්ම අනුපූරක නොවී විචිත්රවත් ද්විතියික වර්ණයක් නිපදවයි: .පෙළ-ආලෝකය { පුරවන්න: oklch(var(--foundation) වෙතින් l c calc (h - 90)); }
Quick Draw McGraw's 1959 Toon මාතෘකාව "El Kabong" හි මගේ ප්රතිනිර්මාණය එකම ශිල්පීය ක්රම භාවිතා කරන නමුත් වඩා විවිධ තාලයකින්. උදාහරණයක් ලෙස, අත්තිවාරම් වර්ණය සහ අඳුරු සෙවන අතර තවත් රේඩියල් අනුක්රමණයක් ඇත.
පසුබිමේ ඇති ගොඩනැගිල්ල සහ ගස එකම අත්තිවාරම් වර්ණයේ විවිධ වර්ණයන් වේ. එම මාර්ග සඳහා, මට අමතර පිරවුම් වර්ණ දෙකක් අවශ්ය විය: .bg-මැද { පුරවන්න: oklch(var(--foundation) වෙතින් calc (l - 0.04) calc (c * 0.91) h); }
.bg-අඳුරු { පුරවන්න: oklch(var(--foundation) වෙතින් calc (l - 0.12) calc (c * 0.64) h); }
අත්තිවාරම් චලනය වීමට පටන් ගත් විට
මෙතෙක්, මා පෙන්වා ඇති සියල්ල ස්ථිතික ය. යමෙක් ෆවුන්ඩේෂන් වර්ණය වෙනස් කිරීමට වර්ණ පිකර් එකක් භාවිතා කළත්, එම වෙනස්වීම ක්ෂණිකව සිදුවේ. නමුත් සජීවිකරණ ග්රැෆික්ස් නිශ්චලව පවතින්නේ කලාතුරකිනි - හෝඩුවාව නමේ ඇත. එබැවින්, වර්ණය පද්ධතියේ කොටසක් නම්, එය සජීවීකරණය කිරීමට හේතුවක් නැත.
අත්තිවාරම් වර්ණය සජීවීකරණය කිරීමට, මට එය මුලින්ම එහි OKLCH නාලිකාවලට බෙදිය යුතුය- සැහැල්ලුබව, ක්රෝමා සහ පැහැය. නමුත් වැදගත් අමතර පියවරක් ඇත: මට එම අගයන් ටයිප් කළ අභිරුචි ගුණාංග ලෙස ලියාපදිංචි කළ යුතුය. නමුත් එයින් අදහස් කරන්නේ කුමක්ද?
පෙරනිමියෙන්, CSS අභිරුචි දේපල අගයක් සම්පූර්ණයෙන්ම වර්ණයක්, දිගක්, අංකයක් හෝ වෙනත් දෙයක් නියෝජනය කරන්නේ දැයි බ්රවුසරයක් නොදනී. එයින් බොහෝ විට අදහස් වන්නේ සජීවිකරණයේදී ඒවා සුමට ලෙස අන්තර් සම්බන්ධිත කළ නොහැකි බවත්, එක් අගයකින් ඊළඟ අගයට පනින බවත්ය.
අභිරුචි දේපලක් ලියාපදිංචි කිරීම බ්රවුසරයට එය නියෝජනය කරන වටිනාකම සහ කාලයත් සමඟ එය හැසිරිය යුතු ආකාරය කියයි. මෙම අවස්ථාවේදී, බ්රවුසරයට මගේ වර්ණ නාලිකා අංක ලෙස සැලකීමට අවශ්ය වන අතර එමඟින් ඒවා සුමට ලෙස සජීවිකරණය කළ හැක.
@property --f-l {
syntax: "
@property --f-c {
syntax: "
@property --f-h {
syntax: "
ලියාපදිංචි වූ පසු, මෙම අභිරුචි ගුණාංග ස්වදේශීය CSS ලෙස හැසිරේ. බ්රවුසරයට ඒවා රාමුවෙන් රාමුවට අන්තර් සම්බන්ධ කළ හැක. මම පසුව එම නාලිකා වලින් පදනම් වර්ණය නැවත ගොඩනඟමි: --පදනම: oklch(var(--f-l) var(--f-c) var(--f-h));
මෙය වෙනත් ඕනෑම සංඛ්යාත්මක අගයක් මෙන් අත්තිවාරම් වර්ණය සජීවීකරණය කළ හැකි බවට පත් කරයි. කාලයත් සමඟ සැහැල්ලු බව මෘදු ලෙස මාරු කරන සරල "හුස්ම ගැනීමේ" සජීවිකරණයක් මෙන්න: @keyframes හුස්ම ගන්නවා { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { සජීවිකරණය: හුස්ම 10s පහසුව-ඉන්-පිටත අනන්තය; }
පිරවුම්, අනුක්රම සහ පහරවල ඇති අනෙකුත් සෑම වර්ණයක්ම --foundation වෙතින් ව්යුත්පන්න වී ඇති නිසා, ඒවා සියල්ලම එකට සජීවීකරණය වන අතර, කිසිවක් අතින් යාවත්කාලීන කිරීම අවශ්ය නොවේ. එක් සජීවිකරණ වර්ණයක්, බොහෝ බලපෑම් මෙම ක්රියාවලිය ආරම්භයේදී, CSS සාපේක්ෂ වර්ණ අගයන් ක්රියාවට නැංවීම පහසු කරන අතරම වැඩි හැකියාවන් ලබා දිය හැකිදැයි මම කල්පනා කළෙමි. මම මෑතකදී මගේ වෙබ් අඩවියේ සම්බන්ධතා පිටුවට නව රන් ආකර පසුබිමක් එක් කළ අතර, පළමු පුනරාවර්තනයට දිලිසෙන සහ පැද්දෙන තෙල් ලාම්පු ඇතුළත් විය.
CSS සාපේක්ෂ වර්ණ සජීවීකරණය කිරීමෙන් පතල් අභ්යන්තරය ලාම්පු වලින් වර්ණවලින් වර්ණ ගැන්වීමෙන් වඩාත් යථාර්ථවාදී කරන්නේ කෙසේදැයි ගවේෂණය කිරීමට මට අවශ්ය විය. මට අවශ්ය වූයේ ඔවුන් අවට ලෝකයට, සැබෑ ආලෝකය බලපාන ආකාරයට බලපෑම් කිරීමටයි. ඉතින්, බහුවිධ වර්ණ සජීවීකරණය කරනවාට වඩා, මම එක් වර්ණයක් පමණක් සජීවීකරණය කරන කුඩා ආලෝක පද්ධතියක් ගොඩනඟා ගත්තෙමි.
මගේ පළමු කාර්යය වූයේ පසුබිම සහ මගේ ලාම්පු අතර උඩ තට්ටුවක් තැබීමයි: <මාර්ගය id="අතිරේඛා" fill="var(--overlay-tint)" [...] style="mix-blend-mode: color" />
මම මිශ්ර-මිශ්රණ-ප්රකාරය: වර්ණය භාවිත කළේ යටින් පවතින දීප්තිය ආරක්ෂා කරන අතරම එයට යටින් ඇති දේ වර්ණාලේප කරන බැවිනි. සජීවිකරණ සක්රීය කර ඇති විට පමණක් උඩැතිරිය දෘශ්යමාන වීමට මට අවශ්ය බැවින්, මම උඩැතිරිය තේරීම සිදු කළෙමි: .svg-mine #overlay { display: none; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { සංදර්ශකය: වාරණ; පාරාන්ධතාව: 0.5; } }
උඩින් ඇති අතර, නමුත් තවමත් ලාම්පු වලට සම්බන්ධ වී නැත. මට ආලෝක ප්රභවයක් අවශ්ය විය. මගේ ලාම්පු සරලයි, ඒ හැම එකකම මම පෙරහනකින් බොඳ කළ රවුම් මූලද්රව්යයක් අඩංගුයි. ෆිල්ටරය මුළු රවුම පුරා ඉතා මෘදු බොඳවීමක් ඇති කරයි.
<පෙරහන id="lamp-glow-1" x="-120%" y="-120%" width="340%" height="340%">
උඩ තට්ටුව සහ ලාම්පු වෙන වෙනම සජීවීකරණය කරනවා වෙනුවට, මම තනි “ගිනිදැල්” වර්ණ සංකේතයක් සජීවීකරණය කර එයින් අනෙක් සියල්ල ලබා ගන්නෙමි. පළමුව, මම OKLCH නාලිකා සඳහා ටයිප් කළ අභිරුචි ගුණාංග තුනක් ලියාපදිංචි කරමි:
@property --fl-l {
syntax: "
මම එම නාලිකා සජීවිකරණය කළ අතර, හිතාමතාම රාමු කිහිපයක් තැඹිලි පාටට තල්ලු කර දැල්වීම ගිනි ආලෝකය ලෙස පැහැදිලිව කියවයි:
@keyframes දැල්ල { 0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --fl-h: 95; } 6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; } 12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; } 18% { --fl-l: 0.88; --fl-c: 0.11; --fl-h: 94; } 24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; } 30% { --fl-l: 0.90; --fl-c: 0.12; --fl-h: 90; } 36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; } 44% { --fl-l: 0.87; --fl-c: 0.12; --fl-h: 96; } 52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; } 60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; } 68% { --fl-l: 0.83; --fl-c: 0.16; --fl-h: 85; } 76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; } 84% { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; } 92% {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; } }
පසුව මම එම සජීවිකරණය SVG වෙත යොමු කළෙමි, එබැවින් බෙදාගත් විචල්යයන් ලාම්පු සහ මගේ උඩ තට්ටුව යන දෙකටම ලබා ගත හැකිය:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { සජීවිකරණය: දැල්ල 3.6s අනන්ත රේඛීය; හුදකලා: හුදකලා;
/* සජීවිකරණ නාලිකා වලින් ගිනි වර්ණයක් සාදන්න */ --දැල්ල: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* දැල්ලෙන් ලබා ගත් පහන වර්ණය */ --lamp-core: oklch (var (--ගින්දර) calc (l + 0.05) calc (c * 0.70) h);
/* එකම දැල්ලෙන් ලබාගත් උඩැතිරි පැහැය */ --overlay-tint: oklch(var (--ගින්දර) සිට calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
අවසාන වශයෙන්, මම එම ව්යුත්පන්න වර්ණ දිලිසෙන ලාම්පු සහ ඒවා බලපාන ආවරණයට යෙදුවෙමි: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > කවය, .svg-mine[data-animations=on] #mine-lamp-2 > කවය { පිරවීම: var (--ලාම්ප්-core); }
.svg-mine[data-animations=on] #overlay { සංදර්ශකය: වාරණ; පිරවීම: var (--overlay-tint); පාරාන්ධතාව: 0.5; } }
දැල්ල තැඹිලි පාටට මාරු වන විට, ලාම්පු උණුසුම් වන අතර, දර්ශනය ඔවුන් සමඟ උණුසුම් වේ. දැල්ල සිසිල් වූ විට, සියල්ල එකට සමතලා වේ. හොඳම දෙය නම් කිසිවක් අතින් ලියා නොමැති වීමයි. මම අත්තිවාරම් වර්ණය වෙනස් කළහොත් හෝ දැල්ල සජීවිකරණ පරාසයන් වෙනස් කළහොත්, සම්පූර්ණ ආලෝක පද්ධතියම එකවර යාවත්කාලීන වේ. ඔබට මගේ වෙබ් අඩවියේ අවසාන ප්රතිඵලය දැක ගත හැක. නැවත භාවිතා කිරීම, නැවත භාවිතා කිරීම, නැවත බැලීම එම Hanna-Barbera සජීවිකරණ ශිල්පීන්ට අවශ්යතාවයෙන් මූලද්රව්ය ප්රතිනිර්මාණය කිරීමට බල කෙරුනි, නමුත් මම වර්ණ නැවත භාවිතා කරන්නේ එය මගේ කාර්යය වඩාත් ස්ථාවර සහ නඩත්තු කිරීමට පහසු කරන බැවිනි. CSS සාපේක්ෂ වර්ණ අගයන් මට ඉඩ දෙන්නේ:
තනි පදනම් වර්ණයක් නිර්වචනය කරන්න, වෙනත් වර්ණ එයට සම්බන්ධ වන ආකාරය විස්තර කරන්න, සෑම තැනකම එම සබඳතා නැවත භාවිතා කරන්න, සහ එක් අගයක් වෙනස් කිරීමෙන් පද්ධතිය සජීවීකරණය කරන්න.
සාපේක්ෂ වර්ණය තේමා කිරීම පහසු නොකරයි. චලිතය වැනි වර්ණය චේතනාන්විත වන්නේ කොතැනදැයි සිතීමේ ක්රමයක් එය දිරිමත් කරයි - සහ එක් අගයක් වෙනස් කිරීමෙන් මුළු දර්ශනයම යටින් ඇති කෘතිය නැවත ලිවීමෙන් තොරව පරිවර්තනය කළ හැකිය.
