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

用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-color
        width 190px
        height 250px
        left -30px
        top -50px
        position absolute
        overflow hidden
        border-radius 50% 50% 0 0

        &:after
            content ''
            position absolute
            width 300px
            height 200px
            background #ffef5e
            top 120px

        .hair
            width 35px
            height 45px
            background base-color
            position absolute
            z-index 1
            transform rotate(70deg) scale(1) skew(44deg) translate(8px)
            &.hair1
                top 17px
                left 27px
            &.hair2
                top 8px
                left 52px
            &.hair3
                top 4px
                left 73px
            &.hair4
                top 0
                left 90px
            &.hair5
                top 4px
                left 108px
            &.hair6
                top 8px
                left 125px
            &.hair7
                top 17px
                right 17px

    .face
        background #fbdac7
        width 130px
        height 105px
        position absolute
        border base-border
        top 0
        border-radius 20px 20px 50px 50px

        .brow
            width 38px
            height 10px
            background base-color
            position absolute
            top 30px
            border-radius 50%

            &:after
                content ''
                width 40px
                height 10px
                background #fbdac7
                position absolute
                top 1px
                border-radius 50%

            &.left-brow
                left 18px
                transform rotate(-10deg)
            &.right-brow
                right 14px
                transform rotate(10deg)

        .eye
            width 15px
            height 15px
            background base-color
            position absolute
            top 40px
            border-radius 50%

            &.left-eye
                left 35px   
            &.right-eye
                right 35px
        .blusher
            width 12px
            height 12px
            background #f79c99
            position absolute
            top 70px
            border-radius 50%  

            &.left-blusher
                left 10px
            &.right-blusher
                right 10px      
        .mouth
            width 25px
            height 25px
            background #d96b6e
            position absolute
            top 60px
            left 52px
            border-radius 50%
            z-index 1

            &:after  
                content ''   
                height 13px
                width 25px
                background #fbdac7
                position absolute

        .ear
            width 10px
            height 20px
            background #fbdac7
            position absolute
            top 30px
            z-index 2
            &.left-ear
                left -11px
                border-radius 5px 0 0 10px
            
            &.right-ear
                right -11px
                border-radius 0 5px 10px 0

        .naek
            height 6px
            width 20px
            position absolute
            top 105px
            left 55px
            background #fbdac7
            border 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>

上半身样式

.clothes
        width 80px
        height 80px
        background #ffffff
        border  base-border
        z-index 2
        overflow hidden
        position absolute
        top 112px
        left 25px 
        border-radius 30% 30% 0 0

        .collar
            width 20px
            height 10px
            z-index 3
            position absolute
            border 1px solid base-color
            background #fff

            &.left-coller
                left 17px
                transform rotate(50deg)
            &.right-coller
                right 17px
                transform rotate(-50deg)

        .straps
            height 80px
            width 10px
            background #e9003a
            z-index 2
            border 1px solid base-color
            position absolute

            &.left-straps
                left 17px
            &.right-straps
                right 17px

    .arm
        width  80px
        height 80px
        border-radius 45px 
        border 1px solid base-color
        background #fff
        z-index 1
        overflow hidden
        position absolute

        &.left-arm
            top 114px
            &:after  
                content ''   
                width  60px
                height 60px
                background #ffef5e
                position absolute
                border 1px solid base-color
                top 9px
                left 10px
                border-radius 30px
        &.right-arm
            top 114px
            right -130px
            &:after  
                content ''   
                width  60px
                height 60px
                background #ffef5e
                position absolute
                border 1px solid base-color
                top 9px
                right  10px
                border-radius 30px
    .belt
        width 80px
        height 20px
        background #e9003a
        z-index 2
        border 1px solid base-color
        position absolute
        top 193px
        left 25px

    .skirt
        width 80px
        height 60px
        border-left 50px solid transparent
        border-right 50px solid transparent
        border-bottom 60px solid #e9003a
        border-radius 0 0 50% 50%
        z-index 0
        position absolute
        top 153px
        left -24px
        .line
            width 1px
            height 30px
            position absolute
            background #000
            z-index 3
            top 75px
            &.line1
                left -3px
                transform rotate(20deg)          
            &.line2
                left 15px
                transform rotate(10deg)
            &.line3
                left 40px            
            &.line4
                right 15px
                transform rotate(-10deg)
            &.line5
                right -3px
                transform 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>

下身样式

.leg
        height 50px
        width 15px
        background #fbdac7
        position absolute
        top 130px
        z-index -1
        border 1px solid base-color
        &.left-leg
            left 38px
        &.right-leg
            right -78px
        &:after  
                content ''   
                width  13px
                height 18px
                background #fff
                z-index 3
                border-top 1px solid base-color
                position absolute
                top 34px
                left 1px

    .stockings
        width 30px
        height 15px
        background #fff
        position absolute
        top 153px
        z-index -2
        &.left-stockings
            left 20px
            transform rotate(-20deg)
            border-radius 50% 0 0 50%       
        &.right-stockings
            left 83px
            transform rotate(20deg)
            border-radius 0 50% 50% 0

    .shoes
        width 45px
        height 23px
        background #a23030
        position absolute
        top 154px
        z-index -3
        &.left-shoes
            left 8px
            transform rotate(-20deg)
            border-radius 50% 0 0 50%       
        &.right-shoes
            left 80px
            transform rotate(20deg)
            border-radius 0 50% 50% 0

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