用stylus画可爱的小丸子

之前看了一些关于二次元用css来画卡通图画的文章，都写得非常棒，但是对于我这样一个有密集恐惧症的小白来说相当的头疼，密密麻麻的括弧和标点让人眼花缭乱，最近学习了一些关于stylus的知识，觉得用stylus来写样式相当地简洁，层级嵌套逻辑关系也非常清晰，索性结合Div和stylus画了一个小丸子。话不多说，一起来感受一下stylus的魅力吧...

效果大同小异-_-

我们来看看小丸子身体各部的详细代码

首先是头部html代码

           <div class="hairs"><div class="hair hair1"></div><div class="hair hair2"></div><div class="hair hair3"></div><div class="hair hair4"></div><div class="hair hair5"></div><div class="hair hair6"></div><div class="hair hair7"></div></div><div class="face"><div class="brow left-brow"></div><div class="brow right-brow"></div><div class="eye left-eye"></div><div class="eye right-eye"></div><div class="blusher left-blusher"></div><div class="blusher right-blusher"></div><div class="mouth"></div><div class="ear left-ear"></div><div class="ear right-ear"></div><div class="naek"></div></div>

头部样式

.hairs background base-colorwidth 190pxheight 250pxleft -30pxtop -50pxposition absoluteoverflow hiddenborder-radius 50% 50% 0 0&:aftercontent ''position absolutewidth 300pxheight 200pxbackground #ffef5etop 120px.hairwidth 35pxheight 45pxbackground base-colorposition absolutez-index 1transform rotate(70deg) scale(1) skew(44deg) translate(8px)&.hair1top 17pxleft 27px&.hair2top 8pxleft 52px&.hair3top 4pxleft 73px&.hair4top 0left 90px&.hair5top 4pxleft 108px&.hair6top 8pxleft 125px&.hair7top 17pxright 17px.facebackground #fbdac7width 130pxheight 105pxposition absoluteborder base-bordertop 0border-radius 20px 20px 50px 50px.browwidth 38pxheight 10pxbackground base-colorposition absolutetop 30pxborder-radius 50%&:aftercontent ''width 40pxheight 10pxbackground #fbdac7position absolutetop 1pxborder-radius 50%&.left-browleft 18pxtransform rotate(-10deg)&.right-browright 14pxtransform rotate(10deg).eyewidth 15pxheight 15pxbackground base-colorposition absolutetop 40pxborder-radius 50%&.left-eyeleft 35px   &.right-eyeright 35px.blusherwidth 12pxheight 12pxbackground #f79c99position absolutetop 70pxborder-radius 50%  &.left-blusherleft 10px&.right-blusherright 10px      .mouthwidth 25pxheight 25pxbackground #d96b6eposition absolutetop 60pxleft 52pxborder-radius 50%z-index 1&:after  content ''   height 13pxwidth 25pxbackground #fbdac7position absolute.earwidth 10pxheight 20pxbackground #fbdac7position absolutetop 30pxz-index 2&.left-earleft -11pxborder-radius 5px 0 0 10px&.right-earright -11pxborder-radius 0 5px 10px 0.naekheight 6pxwidth 20pxposition absolutetop 105pxleft 55pxbackground #fbdac7border base-border 

上半身html代码

            <div class="clothes"><div class="collar left-coller"></div><div class="collar right-coller"></div><div class="straps left-straps"></div><div class="straps right-straps"></div></div><div class="arms"><div class="arm left-arm"></div><div class="arm right-arm"></div></div><div class="belt"></div><div class="skirt"><div class="line line1"></div><div class="line line2"></div><div class="line line3"></div><div class="line line4"></div><div class="line line5"></div></div>

上半身样式

.clotheswidth 80pxheight 80pxbackground #ffffffborder  base-borderz-index 2overflow hiddenposition absolutetop 112pxleft 25px border-radius 30% 30% 0 0.collarwidth 20pxheight 10pxz-index 3position absoluteborder 1px solid base-colorbackground #fff&.left-collerleft 17pxtransform rotate(50deg)&.right-collerright 17pxtransform rotate(-50deg).strapsheight 80pxwidth 10pxbackground #e9003az-index 2border 1px solid base-colorposition absolute&.left-strapsleft 17px&.right-strapsright 17px.armwidth  80pxheight 80pxborder-radius 45px border 1px solid base-colorbackground #fffz-index 1overflow hiddenposition absolute&.left-armtop 114px&:after  content ''   width  60pxheight 60pxbackground #ffef5eposition absoluteborder 1px solid base-colortop 9pxleft 10pxborder-radius 30px&.right-armtop 114pxright -130px&:after  content ''   width  60pxheight 60pxbackground #ffef5eposition absoluteborder 1px solid base-colortop 9pxright  10pxborder-radius 30px.beltwidth 80pxheight 20pxbackground #e9003az-index 2border 1px solid base-colorposition absolutetop 193pxleft 25px.skirtwidth 80pxheight 60pxborder-left 50px solid transparentborder-right 50px solid transparentborder-bottom 60px solid #e9003aborder-radius 0 0 50% 50%z-index 0position absolutetop 153pxleft -24px.linewidth 1pxheight 30pxposition absolutebackground #000z-index 3top 75px&.line1left -3pxtransform rotate(20deg)          &.line2left 15pxtransform rotate(10deg)&.line3left 40px            &.line4right 15pxtransform rotate(-10deg)&.line5right -3pxtransform rotate(-20deg)

下身html代码

            <div class="leg"><div class="leg left-leg"></div><div class="leg right-leg"></div></div><div class="stockings"><div class="stockings left-stockings"></div><div class="stockings right-stockings"></div></div> <div class="shoes"><div class="shoes left-shoes"></div><div class="shoes right-shoes"></div></div>          

下身样式

 .legheight 50pxwidth 15pxbackground #fbdac7position absolutetop 130pxz-index -1border 1px solid base-color&.left-legleft 38px&.right-legright -78px&:after  content ''   width  13pxheight 18pxbackground #fffz-index 3border-top 1px solid base-colorposition absolutetop 34pxleft 1px.stockingswidth 30pxheight 15pxbackground #fffposition absolutetop 153pxz-index -2&.left-stockingsleft 20pxtransform rotate(-20deg)border-radius 50% 0 0 50%       &.right-stockingsleft 83pxtransform rotate(20deg)border-radius 0 50% 50% 0.shoeswidth 45pxheight 23pxbackground #a23030position absolutetop 154pxz-index -3&.left-shoesleft 8pxtransform rotate(-20deg)border-radius 50% 0 0 50%       &.right-shoesleft 80pxtransform rotate(20deg)border-radius 0 50% 50% 0

好了，到这里可爱的小丸子就画好了，在样式部分几乎没有了括号之类的标点，这样让人觉得非常清爽，可以说stylus在很大程度上解放css.
知识有限，不足的地方请多包涵，最后希望对您有所帮助，这也是小编乐见的。