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

littleGrow 发布于2019-08-05 13:37 / 1396人阅读

摘要：用画可爱的小丸子之前看了一些关于二次元用来画卡通图画的文章，都写得非常棒，但是对于我这样一个有密集恐惧症的小白来说相当的头疼，密密麻麻的括弧和标点让人眼花缭乱，最近学习了一些关于的知识，觉得用来写样式相当地简洁，层级嵌套逻辑关系也非常清晰，

用stylus画可爱的小丸子

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

效果大同小异-_-

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

首先是头部html代码

头部样式

.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代码

上半身样式

.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代码

下身样式

 .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.
知识有限，不足的地方请多包涵，最后希望对您有所帮助，这也是小编乐见的。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/57475.html

小丸子成长记---在stylus下用DIV+CSS一步一步打造小丸子

摘要：小丸子成长记程序员没有对象怎么办一个呀但是如果没妹妹呢跟母猴子生一个呀哈哈哈那么怎么用打造一个天真无邪的小丸子呢最后效果一直有种错觉这是旺仔准备工作安装在项目目录下新建和并在上引入命令行切换至项目目录启动实时刷新启小丸子成长记程序员没有对象怎么办? --new 一个呀但是如果没妹妹呢? --跟母猴子生一个呀哈哈哈,那么怎么用stylus打造一个天真无邪的小丸子呢? 最后效果(一...

muzhuyu 2019-08-29 15:06 评论0 收藏0
小丸子成长记---在stylus下用DIV+CSS一步一步打造小丸子

摘要：小丸子成长记程序员没有对象怎么办一个呀但是如果没妹妹呢跟母猴子生一个呀哈哈哈那么怎么用打造一个天真无邪的小丸子呢最后效果一直有种错觉这是旺仔准备工作安装在项目目录下新建和并在上引入命令行切换至项目目录启动实时刷新启小丸子成长记程序员没有对象怎么办? --new 一个呀但是如果没妹妹呢? --跟母猴子生一个呀哈哈哈,那么怎么用stylus打造一个天真无邪的小丸子呢? 最后效果(一...

BWrong 2019-08-05 13:36 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用c...

Codeing_ls 2019-08-02 15:54 评论0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用c...

mayaohua 2019-08-30 13:00 评论0 收藏0