مەندىن CSS ۋە SVG كارتون فىلىملىرى ھەققىدە بارلىق نەرسىلەرنى ئۆگىنىشىمنى تەلەپ قىلىدىغان بىر تۈرنى تۈگەتكەندىن كېيىن ، «Smashing Animations» ۋە «كلاسسىك كارتونلارنىڭ زامانىۋى CSS نى قانداق ئىلھاملاندۇرىدىغانلىقى» توغرىسىدا بۇ يۈرۈشلۈك ئەسەرلەرنى يېزىشقا باشلىدىم. بۇ يىلنى ئاخىرلاشتۇرۇش ئۈچۈن ، مەن سىزگە زامانىۋى CSS ئارقىلىق Toon ماۋزۇسىنى بەك تەسىرلەندۈرىدىغان ئېلېمېنتنى بارلىققا كەلتۈرۈشنى كۆرسەتمەكچى: ئۇلارنىڭ باسما نۇسخىسى. ماۋزۇ سەنئەت ئەسەرلىرى لايىھىسى 20-ئەسىرنىڭ 20-يىللىرى ۋە 30-يىللارنىڭ بېشىدىكى جىمجىت دەۋردە ، فىلىمنىڭ تېما كارتىسىنىڭ مەتبەئە كەيپىياتى پەيدا قىلىپ ، نەق مەيداننى ئورۇنلاشتۇردى ۋە تاماشىبىنلارغا كۆرۈش ئۈچۈن تۆلىگەن فىلىمنىڭ تۈرىنى ئەسكەرتتى.
كارتون ماۋزۇ كارتىلىرىمۇ ماركا ، كەيپىيات ۋە مەنزىرە ئورۇنلاشتۇرۇلغان بولۇپ ، ھەممىسى بىر يەرگە ئۆرۈلگەن. دەسلەپكى يىللاردا ، ئاساسلىق ستۇدىيە خامچوتى تېخىمۇ چوڭ بولغاندا ، بۇ تېما كارتىلىرى ھەمىشە ئوبرازلىق ۋە رەسىملىك ئىدى.
ئەمما 20-ئەسىرنىڭ 50-يىللىرىدا تېلېۋىزور ئاۋاتلاشقاندا ، خامچوت تۆۋەنلەپ ، لاۋرېنس «سەنئەت» گوبلېغا ئوخشاش سەنئەتكارلار لايىھىلىگەن كارتا يېڭى كۆرۈنۈشلۈك تىلنى قوللانغان بولۇپ ، تېخىمۇ گرافىك ، ئۇسلۇب ۋە مۇرەككەپ ئەمەس. ئەسكەرتىش: لاۋرېنس «سەنئەت» گوبلې ئوتتۇرا ئەسىردىكى ئامېرىكا كارتون فىلىمىدىكى دائىم سەل قارىلىدىغان قەھرىمانلارنىڭ بىرى. ئۇ ئاساسلىقى 1950-ۋە 60-يىللاردىكى ئەڭ تەسىرلىك يىللاردا خەننا-باربېرا ئۈچۈن ئىشلىگەن. گوبىل پېرسوناژ كارتون فىلىمى ئەمەس. ئۇنىڭ رولى كەيپىيات يارىتىش ئىدى ، شۇڭا ئۇ Flintstones ، Huckleberry Hound ، Quick Draw McGraw ۋە Yogi Bear قاتارلىق مۇھىتلارنى لايىھەلەپ چىقتى. ئۇنىڭ تېما كارتىسىغا بەلگە چاپلانغان رەسىملەر چۈشۈرۈلگەن بولۇپ ، خەننا-باربېرانىڭ بەلگە خاراكتېرلىك قىياپىتىنى ئېنىقلاشقا ياردەم بەرگەن. گوبلېنىڭ تېز سىزىش ماك گراۋ ۋە يوگى ئېيىق قاتارلىق پېرسوناژلارغا ئائىت سەنئەت ئەسەرلىرى كىچىكرەك تېلېۋىزور ئېكرانىدا ئۈنۈملۈك بولدى. ئۇ كارتوندىن يەنىلا قايتا كۆپەيتىشنىڭ ئورنىغا ، ئۇنىڭ ماھىيىتىنى ئىگىلىۋالغان يەككە ، كۈچلۈك ئىدىيەنى ئوتتۇرىغا قويدى. «Buzzin ئېيىق» تا ، يوگى تىك ئۇچاردا ۋارقىراپ كەتتى. ئۇ قاڭقىپ ، قولىدىكى رەسىملىك سېۋەتنى ، «سەيلىگاھتا ئېيىق» تا ، «مۇكاپاتقا ئېرىشىش جېڭى» ئۈچۈن ، يوگى ماۋزۇ تېكىستىنى قۇتىلىدى.
تايىنىدىغان ھەرىكەت ئاز ياكى يوق بولغاچقا ، گوبلېنىڭ يەككە رامكىسى كەيپىيات يارىتىشى ، نەق مەيداننى ئورۇنلاشتۇرۇشى ۋە بىر ھېكايىنى تەسۋىرلىشى كېرەك ئىدى. ئۇلار بۇنى دائىم سەنئەت ئەسەرلىرىگە سىڭدۈرۈلگەن تەكشى رەڭ ، گرافىك شەكىل ۋە مەتبەئە تېخنىكىسى ئارقىلىق قىلغان.
تور بەتتە ئىشلەيدىغان لايىھىلىگۈچىلەر بولۇش سۈپىتى بىلەن ، توننىڭ ئىسمى بىزگە ماركىنىڭ مىجەزىنى قانداق يەتكۈزۈش ، تۇنجى تەسىرات بېرىش ۋە مەھسۇلات ياكى تور بېكەت ئىشلىتىش ئارقىلىق باشقىلارنىڭ تەجرىبىسىگە ئۈمىد بېغىشلاش توغرىسىدا نۇرغۇن نەرسىلەرنى ئۆگىتىدۇ. بىز سەنئەتكارلارنىڭ تېخنىكىلىرىدىن ئۈنۈملۈك لوزۇنكا ، قونۇش بېتى ماۋزۇسى ، ھەتتا ياخشى ئۇ مودا چاقماق ئېكرانى ھاسىل قىلالايمىز. توننىڭ ماۋزۇسى كارتون ماۋزۇ كارتىلىرى تەسۋىر بىلەن بىرلەشتۈرۈشنىڭ مۇشت ياكى باش قەھرىماننىڭ ئېھتىياجىنى قانداق يەتكۈزگەنلىكىنى كۆرسىتىپ بېرىدۇ. بىر نەچچە تېكىست سايىسى ، تېكىستنى سوقۇش ۋە ئۆزگەرتىش ئۇسۇللىرى بىلەن زامانىۋى CSS سىزنى ئوخشاش ئېنېرگىيەگە ئېرىشتۈرەلەيدۇ.
Toon Text Title Generator بۇ ماقالىنى يېزىشنىڭ بىر قىسمىدا ، مەن بەك ياخشى كۆرىدىغان كارتون ماۋزۇلىرىغا ئوخشاش ئۇسلۇبتىكى تېكىست ھاسىل قىلىش قورالىنىڭ بولۇشىنىڭ پايدىلىق ئىكەنلىكىنى ھېس قىلدىم. شۇڭا مەن بىرنى ياسىدىم. مېنىڭ Toon Text Title Generator سىزگە رەڭ ، سەكتە ۋە كۆپ خىل تېكىست سايىسىنى سىناق قىلىپ بېرىدۇ. سىز بوياق تەرتىپىنى تەڭشىيەلەيسىز ، خەت ئارىلىقىنى قوللىنالايسىز ، ئەۋرىشكە خەت نۇسخىسىنى تاللىسىڭىز تېكىستنى ئالدىن كۆرەلەيسىز ، ئاندىن ھاسىل قىلىنغان CSS نى بىۋاسىتە چاپلاش تاختىسىغا كۆچۈرۈپ بىر تۈردە ئىشلىتەلەيسىز. Toon Title CSS Toon Text Title Generator تەمىنلىگەن CSS نى كۆچۈرۈپ چاپلىسىڭىز بولىدۇ. ئەمما ئۇنىڭ نېمە قىلىۋاتقانلىقىغا يېقىندىن قاراپ باقايلى. تېكىست سايىسى ئاۋگى دوگگىنىڭ «Yuk-Yuk ئۆردەك» ناملىق بۆلۈمىدىكى بۇ ماۋزۇنىڭ تۈرىگە قاراڭ ، ئۇنىڭ سۇس سېرىق ھەرپلىرى ۋە قېنىق ، قاتتىق ، offset سايىسى ئۇنى ئارقا سەھنىدىن چىقىرىپ ، چوڭقۇرلۇق تەسەۋۋۇرىنى پەيدا قىلىدۇ.
سىز بەلكىم تېكىست سايىسىنىڭ تۆت خىل قىممەتنى قوبۇل قىلىدىغانلىقىنى ئاللىقاچان بىلىشىڭىز مۇمكىن: (1) توغرىسىغا ۋە (2) تىك سىزىق ، (3) تۇتۇق ۋە (4) قاتتىق ياكى يېرىم سۈزۈك رەڭ. بۇ تولۇقلىما قىممەتلەر ئىجابىي ياكى سەلبىي بولىدۇ ، شۇڭا مەن تۆۋەنگە ۋە ئوڭغا تارتىلغان قاتتىق سايە ئارقىلىق «Yuk-Yuk ئۆردەك» نى كۆپەيتەلەيمەن: color: # f7f76d; text-shadow: 5px 5px 0 # 1e1904;
يەنە بىر جەھەتتىن ، بۇ «پىنت گىگانت» ماۋزۇسىنىڭ سەلبىي يېرىم يۇمشاق سايىسى بىلەن باشقىچە تۇيغۇ بار: رەڭ: # c2a872; text-shadow: -7px 5px 0 # b100e, 0 -5px 10px # 546c6f;
ئارتۇقچە چوڭقۇرلۇق قوشۇش ۋە تېخىمۇ قىزىقارلىق ئۈنۈم ھاسىل قىلىش ئۈچۈن ، مەن كۆپ سايە قاتلىيالايمەن. «ئۆردەك قىلايلى» ئۈچۈن ، مەن تۆت سايىنى بىرلەشتۈرىمەن: بىرىنچىسى مەنپىي گورىزونتال شەكىللىك مەنپىي گورىزونتال سىزىق بىلەن تېكىستنى تەگلىكتىن كۆتۈرۈش ، ئاندىن ئاستا-ئاستا يۇمىلاق سايە ئارقىلىق ئۇنىڭ ئەتراپىدا قالايمىقانچىلىق پەيدا قىلىش: color: # 6F4D80; text-shadow: -5px5px 0 # 260e1e, / * سايە 1 * / 0 0 15px # e9ce96, / * سايە 2 * / 0 0 30px # e9ce96, / * سايە 3 * / 0 0 30px # e9ce96; / * Shadow 4 * /
بۇ سايە شۇنى كۆرسىتىپ بېرىدۇكى ، تېكىست سايىسىنى ئىشلىتىش پەقەت يورۇتۇش ئۈنۈمى يارىتىشلا ئەمەس ، چۈنكى ئۇلار زىننەتلەش ۋە خاسلىق قوشالايدۇ. Text Stroke نۇرغۇنلىغان كارتون ماۋزۇ كارتىلىرى دادىل سىزىقلىق خەتلەرنى ئۆز ئىچىگە ئالىدۇ. مەن تېكىست ئارقىلىق سەكرەش ئارقىلىق بۇ ئۈنۈمنى قايتا ھاسىل قىلالايمەن. ئۇزاقتىن بۇيان ، بۇ مۈلۈك پەقەت -webkit- prefix ئارقىلىقلا بار ئىدى ، ئەمما بۇ ئۇنىڭ زامانىۋى توركۆرگۈچلەردە قوللانغانلىقىدىن دېرەك بېرىدۇ.
text-stroke ئىككى خۇسۇسىيەتنىڭ قىسقارتىلمىسى. بىرىنچىسى ، تېكىست سوقۇلۇش كەڭلىكى ئايرىم ھەرپلەرنى چۆرىدىگەن ھالدا ، ئىككىنچى ، تېكىست سوقۇش رەڭگى ئۇنىڭ رەڭگىنى كونترول قىلىدۇ. «كۈچۈك نېمە بولسا» ئۈچۈن ، مەن سېرىق تېكىستكە 4px كۆك سەكتىنى قوشتۇم: color: # eff0cd; -webkit-text-stroke: 4px # 7890b5; text-stroke: 4px # 7890b5;
سەكتە سايە بىلەن بىرلەشتۈرۈلگەندە ئالاھىدە پايدىلىق بولىدۇ ، شۇڭا «ئۆسۈپ يېتىلىش ، ئۆسۈپ يېتىلىش ، يوقىلىش» ئۈچۈن ، مەن ئۈچ ئۆلچەملىك تېكىست ئۈنۈمىنى ھاسىل قىلىش ئۈچۈن ئاران تۇتۇق 1px سايىغا نېپىز 3px سەكتىنى قوشتۇم: color: # fbb999; text-shadow: 3px 5px 1px # 5160b1; -webkit-text-stroke: 3px # 984336; text-stroke: 3px # 984336;
Paint Order تېكىستنى ئىشلىتىش ھەمىشە مۆلچەردىكى نەتىجىنى ھاسىل قىلالمايدۇ ، بولۇپمۇ تېخىمۇ نېپىز ھەرپلەر ۋە قېلىنراق سوقۇشلار بىلەن بولىدۇ ، چۈنكى سۈكۈتتىكى ھالەتتە توركۆرگۈچ تولدۇرغاندا سەكتىنى سىزىدۇ. كىشىنى ئەپسۇسلاندۇرىدىغىنى ، CSS يەنىلا سىزما رەسىمدىكىگە ئوخشاش سەكتىنىڭ ئورنىنى تەڭشەشكە يول قويمايدۇ. قانداقلا بولمىسۇن ، بوياق زاكاز مال-مۈلۈكنىڭ قىممەت قارىشى بار ، ئۇ مېنىڭ سەكتىنى تولدۇرۇشنىڭ ئالدىدا ئەمەس ، بەلكى كەينىگە قويۇشىمغا يول قويىدۇ.
بوياق تەرتىپى: سەكتە ئالدى بىلەن سەكتىنى بويايدۇ ، ئاندىن تولدۇرىدۇ ، ھالبۇكى بوياق تەرتىپى: تولدۇرۇش ئەكسىچە بولىدۇ: color: # fbb999; بوياق تەرتىپى: تولدۇرۇش text-shadow: 3px 5px 1px # 5160b1; text-stroke-color: # 984336; text-stroke-width: 3px;
ئۈنۈملۈك سەكتە خەتلەرنى ئوقۇشچان قىلىدۇ ، ئېغىرلىق قوشىدۇ ، - سايە ۋە بوياق تەرتىپى بىلەن بىرلەشتۈرۈلگەندە تەكشى تېكىستنى ھەقىقىي مەۋجۇت قىلىدۇ. تېكىست ئىچىدىكى تەگلىك نۇرغۇن كارتون ماۋزۇ كارتىلىرى خەتكە تۈزۈلۈش ، رېشاتكا ياكى رەسىملىك تەپسىلاتلارنى قوشۇش ئارقىلىق تەكشى رەڭدىن ھالقىپ كەتتى. بەزىدە بۇ بىر خىل تۈزۈلۈش ، باشقا ۋاقىتلاردا ئۇ ئىنچىكە ئاھاڭ ئۆزگىرىشى بىلەن تەدرىجىي بولۇشى مۇمكىن. توردا ، مەن تەگلىك رەسىمى ياكى تېكىستنىڭ كەينىدىكى گرادېنتنى ئىشلىتىپ ، ئاندىن ئۇنى ھەرپنىڭ شەكلىگە قىسىپ بۇ ئۈنۈمنى قايتا قۇرالايمەن. بۇ ئىككى خىل ئىقتىدارغا تايىنىدۇ: تەگلىك قىسقۇچ: تېكىست ۋە تېكىست تولدۇرۇش رەڭ: سۈزۈك.
ئالدى بىلەن ، تېكىستنىڭ كەينىدە ئارقا كۆرۈنۈش قوللىنىمەن. بۇ bitmap ياكى ۋېكتورلۇق رەسىم ياكى CSS دەرىجىسى بولىدۇ. تېز سىزىش ماك گراۋ بۆلۈمى «بابا يەمچۈكى» دىن كەلگەن بۇ مىسال ئۈچۈن ، ماۋزۇ تېكىستى قاراڭغۇدىن يورۇقلۇققا قەدەر ئىنچىكە ئۈستى - ئاستى گىرادۇسنى ئۆز ئىچىگە ئالىدۇ: تەگلىك: سىزىقلىق گرادېنت (0deg ، # 667b6a ، # 1d271a);
كېيىنكى قەدەمدە ، مەن بۇ تەگلىكنى گىلفلارغا قىستۇرۇپ ، تېكىستنى سۈزۈك قىلىمەن ، تەگلىك ئارقىلىق كۆرسىتىلىدۇ: -webkit-background-clip: تېكىست; -webkit-text-fill-color: سۈزۈك
پەقەت بۇ ئىككى قۇر بىلەنلا ، تەگلىك ئەمدى تېكىستنىڭ كەينىگە سىزىلمايدۇ. ئۇنىڭ ئورنىغا ئۇنىڭ ئىچىگە بويالغان. بۇ تېخنىكا سەكتە ۋە سايە بىلەن بىرلەشتۈرۈلگەندە ئالاھىدە ياخشى ئىشلەيدۇ. كېسىلگەن گرادېنت خەتنى رەڭ ۋە توقۇلما بىلەن تەمىنلەيدۇ ، سەكتە ئۇنىڭ قىرلىرىنى ئۆتكۈر قىلىدۇ ، سايە ئۇنى تەگلىكتىن ئۆستۈرىدۇ. ئۇلار بىرلىكتە CSS دىن باشقا ھېچنېمە ئىشلەتمەي قولدا بويالغان تېما كارتىلىرىنىڭ قاتلاملىق قىياپىتىنى قايتىدىن يارىتىدۇ. بۇرۇنقىدەكلا ، كېسىلگەن تېكىستنى ئەستايىدىللىق بىلەن سىناڭ ، چۈنكى توركۆرگۈنىڭ ئۇۋىسى بەزىدە سايە ۋە رەسىمگە تەسىر كۆرسىتىدۇ. تېكىستنى ئايرىم ھەرپلەرگە بۆلۈش بەزىدە مەن بىر پۈتۈن سۆز ياكى ماۋزۇنى ئۇسلۇب قىلىشنى خالىمايمەن. مەن ئايرىم ھەرپلەرنى ئۇسلۇب قىلماقچى - بىر پېرسوناژنى جايىغا توغرىلاپ ، بىر گىلىفقا ئارتۇقچە ئېغىرلىق بەرمەكچى ياكى بىر نەچچە ھەرپنى مۇستەقىل جانلاندۇرماقچى. ئاددىي HTML ۋە CSS دە ، بۇنىڭ بىردىنبىر ئىشەنچلىك ئۇسۇلى بار: ھەر بىر ھەرپنى ئۆزىنىڭ ئايلانما ئېلېمېنتىغا ئوراپ قويۇڭ. مەن ئۇنى قولدا قىلالايتتىم ، ئەمما بۇ نازۇك ، ئاسراش تەس ، كۆپەيتىلگەندە تېزلا پارچىلىنىپ كېتىدۇ. ئەكسىچە ، ھەر بىر ھەرىپنى كونترول قىلىشقا ئېھتىياجلىق بولغاندا ، splt.js غا ئوخشاش تېكىست بۆلۈش ئامبىرىنى ئىشلىتىمەن (گەرچە باشقا ھەل قىلىش چارىسى بولسىمۇ). بۇ تېكىست تۈگۈنىنى ئېلىپ ، سۆز ياكى ھەرپلەرنى ئاپتوماتىك ئوراپ ، بەلگەمنى قالايمىقانلاشتۇرماي ماڭا جانلىق ۋە ئۇسلۇبقا قوشۇمچە ئىلمەك بېرىدۇ. بۇ مېنىڭ HTML نى ئوقۇشچانلىقى ۋە مەنىسىنى ساقلاپ قالىدىغان بىر خىل ئۇسۇل ، شۇنىڭ بىلەن بىر ۋاقىتتا ماڭا كلاسسىك كارتون تېما كارتىلىرىدا كۆرگەن تەكشى ، خاراكتېرلىق مەتبەئە ئەسەرلىرىنى قايتا يارىتىشىم كېرەك. قانداقلا بولمىسۇن ، بۇ خىل ئۇسۇل ئوتتۇرىغا قويۇلغانكۆپ قىسىم ئېكران ئوقۇرمەنلىرى تېكىست تۈگۈنلىرىنى تەرتىپلىك ئوقۇيدىغان بولغاچقا ، قولايلىق ئۆڭكۈرلەر. شۇڭا بۇ:
Hum تاتلىق Hum
You سىز ئويلىغاندەك ئوقۇيدۇ: Hum Sweet Hum
ئەمما بۇ:
H u m
… توركۆرگۈچ ۋە ئېكران ئوقۇغۇچقا ئاساسەن باشقىچە ئىزاھلاشقا بولىدۇ. بەزىلىرى ھەرپلەرنى بىرلەشتۈرۈپ ، سۆزلەرنى توغرا ئوقۇيدۇ. باشقىلار خەت ئارىلىقىدا توختاپ قېلىشى مۇمكىن ، بۇ ئەھۋال ئەڭ ناچار ئەھۋالدا: “H…” “U…” “M…”
كىشىنى ئەپسۇسلاندۇرىدىغىنى ، بىر قىسىم بۆلۈشۈش ھەل قىلىش چارىلىرى ھەمىشە ئېرىشكىلى بولىدىغان نەتىجىنى يەتكۈزەلمەيدۇ ، شۇڭا مەن ئۆزۈمنىڭ سىناق بۆلەكچىسى splinter.js نى يازدىم. يەككە خەتلەرنى ئۆزگەرتىش Toon Text Splitter نى قوزغىتىش ئۈچۈن ، مەن بۆلمەكچى بولغان ئېلېمېنتقا سانلىق مەلۇمات- خاسلىق قوشىمەن:
Hum Sweet Hum
بىرىنچىسى ، مېنىڭ قوليازمىم ھەر بىر سۆزنى ئايرىم ھەرپلەرگە ئايرىپ ، سىنىپ ۋە ARIA خاسلىقى قوللىنىلغان ئارىلىق ئېلېمېنتىغا ئوراپ بېرىدۇ:
بۇ قوليازما بۆلۈنگەن ئېلېمېنتنىڭ دەسلەپكى مەزمۇنىنى ئېلىپ ، ئۇنى ئارىيە خاسلىقى سۈپىتىدە قوشۇپ ، قولايلىقلىقىنى ساقلاشقا ياردەم بېرىدۇ:
ئۇ سىنىپ خاسلىقى قوللىنىلغاندىن كېيىن ، مەن ئايرىم ھەرپلەرنى خالىغانچە ئۇسلۇب قىلالايمەن.
مەسىلەن ، «Hum Sweet Hum» ئۈچۈن ، مەن ئۇنىڭ خەتلىرىنىڭ ئاساسىي سىزىقتىن قانداق ئۆزگىرىدىغانلىقىنى كۆپەيتمەكچى. Toon Text Splitter نى ئىشلىتىپ بولغاندىن كېيىن ، مەن بىر نەچچە خىل ئوخشىمىغان تۆت خىل تەرجىمە قىممىتىنى قوللاندىم: n- بالا تاللىغۇچىلار يېرىم ئىختىيارى كۆرۈنۈش ھاسىل قىلدى: / * 4- ، 8- ، 12- ... * / .toon-char: nth-child (4n) {تەرجىمە: 0 -8px; } / * 1- ، 5- ، 9-كۈنلەر ... * / .toon-char: nth-child (4n + 1) {تەرجىمە: 0 -4px; } / * 2- ، 6- ، 10- ... * / .toon-char: nth-child (4n + 2) {تەرجىمە: 0 4px; } / * 3- ، 7- ، 11- ... * / .toon-char: nth-child (4n + 3) {تەرجىمە: 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) { rotate: -4deg; }
/ * 1- ، 5- ، 9-كۈنلەر ... * / .toon-char: nth-child (4n + 1) { rotate: -8deg; }
/ * 2- ، 6- ، 10- ... * / .toon-char: nth-child (4n + 2) { rotate: 4deg; }
/ * 3- ، 7- ، 11- ... * / .toon-char: nth-child (4n + 3) { ئايلاندۇرۇش: 8deg; }
ئەسسالامۇئەلەيكۇم ، مەن بۇ پېرسونا characters لارنى چاقچاق قىلىپ ، تونۇم تېكىست ئۇسلۇبىدىكى ماۋزۇلارنى جانلاندۇرالايمەن. ئالدى بىلەن ، ھەرپلەرنى ئايلاندۇرىدىغان ئاچقۇچلۇق كارتوننى قۇردىم:
@keyframes jiggle { 0%, 100% {ئۆزگەرتىش: ئايلاندۇرۇش (var (- base-rotate, 0deg)); } 25% {ئۆزگەرتىش: ئايلىنىش (ھېسابلاش (var (- ئاساسى ئايلىنىش ، 0deg) + 3deg)); } 50% {ئۆزگەرتىش: ئايلىنىش (ھېسابلاش (var (- ئاساسى ئايلىنىش ، 0deg) - 2deg)); } 75% {ئۆزگەرتىش: ئايلىنىش (ھېسابلاش (var (- ئاساسى ئايلىنىش ، 0deg) + 1deg)); } }
ئۇنى Toon Text Splitter قۇرغان بوشلۇق ئېلېمېنتلىرىغا ئىشلىتىشتىن بۇرۇن: .toon-char { كارتون فىلىم: jiggle 3s چەكسىز ئوڭايسىزلىنىش transform-origin: center bottom; }
ئاخىرىدا ، ئايلىنىش مىقدارى ۋە ھەر بىر ھەرپلەر تەۋرىنىشتىن بۇرۇن كېچىكىشنى بەلگىلەش: .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) {كارتون-كېچىكىش: 0.1s; } .toon-char: nth-child (4n + 1) {كارتون-كېچىكىش: 0.3s; } .toon-char: nth-child (4n + 2) {كارتون-كېچىكىش: 0.5s; } .toon-char: nth-child (4n + 3) {كارتون-كېچىكىش: 0.7s; }
تەسىرلەندۈرۈش ئۈچۈن بىر رامكا كارتون ماۋزۇ سەنئەتكارلىرىنىڭ تەسىر قالدۇرىدىغان بىر رامكىسى بار بولۇپ ، ئۇلارنىڭ باسما رەسىملىرى سىزغان سەنئەت ئەسەرلىرىدەك مۇھىم ئىدى. توردىمۇ ئوخشاش. ياخشى لايىھەلەنگەن باش ياكى قەھرىمانرايون ئېنىقلىق ، خاراكتېر ۋە ئىشەنچكە موھتاج - پەقەت سۇسلاشقان تولۇق كەڭلىكتىكى تەگلىك رەسىمى ئەمەس. بىر قانچە ئەستايىدىللىق بىلەن تاللانغان CSS خۇسۇسىيىتى - سايە ، سەكتە ، كېسىلگەن تەگلىك ۋە بىر قىسىم چەكلەنگەن كارتونلار بىلەن بىز ئوخشاش تەسىرنى قايتا ھاسىل قىلالايمىز. مەن تېكىستنى ياخشى كۆرىمەن ، چۈنكى مەن سېغىنىش سەۋەبىدىن ئەمەس ، بەلكى ئۇنىڭ لايىھىلىنىشى مەقسەتلىك. قەستەن تاللاڭ ، ھەمدە ئازراق توننا تېكىست خەت نۇسخىسىنى لايىھىلىشىڭىزگە مۇشت قوشۇڭ.
