当前位置: 首页 > Web前端 > HTML5

【二次元手写笔解放css】用手写笔画可爱的小丸子

时间:2023-04-05 21:47:44 HTML5

之前看过一些二维css画卡通图片的文章,都非常不错,但是对于我这个新手来说还是蛮头疼的密集恐惧症。密密麻麻的括号和标点符号让人眼花缭乱。最近学习了一些关于手写笔的知识。感觉用stylus写样式还是挺简洁的,层次嵌套的逻辑关系也很清晰,简单的结合了Div和stylus画了一个小球。话不多说,一起来感受下stylus的魅力吧……效果差不多-_-下面来看看丸子身体各个部位的详细代码吧。首先是头部html代码

头部样式.hairsbackgroundbase-colorwidth190pxheight250pxleft-30pxtop-50pxpositionabsoluteoverflowhiddenborder-radius50%50%00&:aftercontent''positionabsolutewidth300px高度200px背景#ffef5etop120px.hairwidth35pxheight45pxbackgroundbase-colorpositionabsolutez-index1transformrotate(70deg)scale(1)skew(44deg)translate(8px)&.hair1top17pxleft27px&.hair2顶部8px左侧52px&.hair3top4pxleft73px&.hair4top0left90px&.hair5top4pxleft108px&.hair6top8pxleft125px&.hair7top17pxright17px.facebackground#fbdac7width130pxheight105pxpositionabsoluteborderbase-bordertop0border-radius20px20px50px50px.browwidth38pxheight10pxbackgroundbase-colorpositionabsolutetop30pxborder-radius50%&:aftercontent''width40pxheight10pxbackground#fbdac7位置绝对顶部1pxborder-radius50%&.左眉left18pxtransformrotate(-10deg)&.right-browright14pxtransformrotate(10deg).eyewidth15pxheight15pxbackgroundbase-colorpositionabsolutetop40pxborder-radius50%&.left-eyeleft35px&.right-右眼35px.blusher宽度12px高度12px背景#f79c99位置绝对顶部70pxborder-radius50%&.left-blusherleft10px&.right-blusherright10px.mouthwidth25pxheight25pxbackground#d96b6epositionabsolutetop60pxleft52px边界半径50%z-index1&:aftercontent''height13pxwidth25pxbackground#fbdac7positionabsolute.earwidth10pxheight20pxbackground#fbdac7positionabsolutetop30pxz-index2&.left-earleft-11pxborder-radius5px0010px&.right-earright-11pxborder-radius05px10px0.naekheight6pxwidth20pxpositionabsolutetop105pxleft55pxbackground#fbdac7borderbase-border上半身html代码上半身样式.clotheswidth80pxheight80pxbackground#ffffffborderbase-borderz-index2overflowhiddenpositionabsolutetop112pxleft25pxborder-radius30%30%00.collarwidth20pxheight10pxz-index3positionabsoluteborder1pxsolidbase-colorbackground#fff&.left-collerleft17pxtransformrotate(50deg)&.right-collerright17pxtransformrotate(-50deg).strapsheight80pxwidth10pxbackground#e9003az-index2边框1pxsolidbase-colorpositionabsolute&.left-strapsleft17px&.right-strapsright17px.armwidth80pxheight80pxborder-radius45pxborder1pxsolidbase-colorbackground#fffz-index1overflowhiddenpositionabsolute&.left-armtop114px&:aftercontent''width60pxheight60pxbackground#ffef5epositionabsoluteborder1pxsolidbase-colortop9pxleft10pxborder-radius30px&.right-armtop114pxright-130px&:aftercontent''width60pxheight60pxbackground#ffef5eposition绝对边框1pxsolidbase-colortop9pxright10pxborder-radius30px.beltwidth80pxheight20pxbackground#e9003az-index2border1pxsolidbase-colorpositionabsolutetop193pxleft25px.skirtwidth80pxheight60pxborder-left50pxsolidtransparentborder-right50pxsolidtransparentborder-bottom60pxsolid#e9003aborder-radius0050%50%z-index0绝对位置top153pxleft-24px.linewidth1pxheight30pxpositionabsolutebackground#000z-index3top75px&.line1left-3pxtransformrotate(20deg)&.line2left15pxtransformrotate(10deg)&.line3left40px&.line4right15pxtransformrotate(-10deg)&.line5right-3pxtransformrotate(-20deg)下身html代码下身样式.legheight50pxwidth15pxbackground#fbdac7positionabsolutetop130pxz-index-1border1pxsolidbase-color&.left-legleft38px&.right-legright-78px&:aftercontent''width13pxheight18pxbackground#fffz-index3border-top1pxsolidbase-colorpositionabsolutetop34pxleft1px.stockingswidth30pxheight15pxbackground#fffpositionabsolutetop153pxz-index-2&.left-stockingsleft20pxtransformrotate(-20deg)border-radius50%0050%&.right-stockingsleft83pxtransformrotate(20deg)border-radius050%50%0.shoeswidth45pxheight23pxbackground#a23030位置topabs154pxz-index-3&.left-shoesleft8pxtransformrotate(-20deg)border-radius50%0050%&.right-shoesleft80pxtransformrotate(20deg)border-radius050%50%0好现在,可爱的小球就画在这里了。样式部分几乎没有括号之类的标点符号,让人感觉非常清爽。可以说stylus在很大程度上解放了css。知识有限,如有不足之处还请大家多多包涵,希望最后能对大家有所帮助,小编乐见其成