程序员没有对象怎么办?
答: new 一个呀
但是如果没妹妹呢?

答: 母猴子生一个呀

哈哈哈,那么怎么用stylus打造一个天真无邪的小丸子呢?

最后效果(一直有种错觉这是旺仔???)

准备工作

  1. npm安装stylus—->npm install -g stylus

  2. 在项目目录下新建wanzi.css,wanzi.styl和index,并在html上引入wanzi.css

  3. 命令行切换至项目目录
    启动live-server实时刷新 –>live-server
    启动stylus,监视wanzi.styl—>stylus -w wanzi.styl

构造小丸子整体结构

先分析下小丸子的构造,小丸子长了:

  1. 1张脸

  2. 头发

  3. 脖子

  4. 身子,身子上穿了衣服

  5. 腰上有皮带

  6. 两只手

  7. 两条腿,穿了红裙子

  8. 脚,穿了红鞋

所以总体结构就是

脸的构造

先设置基础样式 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
base-color = #152131

body
  font-size 20px

body, div
  margin 0
  padding 0
  background #ffef5e

.border
  border 1px solid base-color

.main
  position relative
  width 1000px
  height 1000px
  margin 50px auto

.wanzi
  position absolute
  top 250px
  left 100px
  z-index 10

脸上有眼睛,耳朵,眉毛,酒窝,还有樱桃嘴.所以可以看出都是嵌套关系,在stylus中表现为

脸部基础样式

1
2
3
4
5
6
7
8
9
.face
    background #fbdac7
    width 126px
    height 113px
    position absolute
    border 1px solid #000
    top 0
    left 20%
    border-radius 18px 40px 80px 80px
  • 眉毛
    实现原理:设置width,height确定眉毛长度,border-radius确定圆化程度,transform:rotate()确定眉毛摆放倾斜程度 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.brow
        width 37px
        height 3px
        background base-color
        position absolute
        top 31px
        border-radius 50%

        &.left-brow
            left 13px
            transform: rotate(-13deg)
        &.right-brow
            right 13px
            transform: rotate(13deg)

  • 眼睛

    实现:将盒子用border-radius圆化四角,形成圆形,width和height影响眼睛大小,形状 

1
2
3
4
5
6
7
8
9
10
11
12
13
.eye
        width 13px
        height 13px
        border-radius: 50%
        background #000000
        position absolute
        top 45px
        z-index 2

        &.left-eye
            left 30%
        &.right-eye
            right 30%
  • 耳朵
    实现原理:设置border-radius,width和height影响耳朵大小,形状 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ear
        width 17px
        height 26px
        position absolute
        top 30px
        background-color #fbdac7
        z-index 2
        
        &.left-ear
          left -10%
          border-radius: 40% 0  0 69%
        &.right-ear
          right -10%
          border-radius  0 40%  69% 0
  • 酒窝
    实现原理:设置border-radius,width和height影响酒窝大小,形状 
1
2
3
4
5
6
7
8
9
10
11
12
13
.blusher
        width 14px
        height 14px
        border-radius 50%
        background-color #f79c99
        position absolute
        top 77px
        z-index 2

        &.left-blusher
          left 9%
        &.right-blusher
          right 9%
  • 嘴巴
    实现原理:使用圆角border-radius将盒子弄圆,通过定义伪元素after后的样式,将伪元素背景颜色设置成脸部颜色,达到遮住嘴巴盒子上部分的效果,形成嘴巴的形状 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.mouth
       width 30px
       height 27px
       border-radius:79%
       border: 1px solid #000
       background-color #e77072
       position absolute
       top 62px
       left 38%
       z-index 1

       &:after
         content '' /* 必须要有content属性*/
         width 32px
         height 25px
         position absolute
         top -9px
         left -1px
         background-color #fbdac7

锯齿头发构造

实现:通过transform:skew()将盒子变成平行四边形,然后通过rotate()将平行四边形旋转至角朝下,再通过位置调整,调整头发位置 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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

脖子

1
2
3
4
5
6
7
8
9
.neck
    width 20px
    height 7px
    border 1px solid #000
    background-color #fbdac7
    position absolute
    top 113px
    left 53px
    z-index 1

衣服

整体分析:衣服有衣领,背带,怎么让背带跟衣领完整的显示在衣服中,不超过衣服盒子?

实现:通过在衣服盒子里设置overflow:hidden,隐藏超出盒子部分的元素,再通过z-index调整显示次序,遮住被衣领盖住的背带部分

衣领实现:tranform:rotate()旋转至合适位置 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.clothes
    width 130px
    height 130px
    position absolute
    border: 1px solid #000
    background-color #ffffff
    border-radius 36% 36% 0 0
    overflow hidden
    top 121px
    z-index 10

    .collar    /*衣领*/
      width 10px
      height 25px
      position absolute
      border: 1px solid #000
      background-color #fff
      top -8px
      z-index 4

      &.left-collar 
        left 35%
        transform rotate(-40deg)
      &.right-collar
        right 35%
        transform rotate(40deg)

    .straps     /*背带*/
      width 10px
      height 120px
      position absolute
      background-color #f7003b
      border: 1px solid #000
      top 0
      z-index 3

      &.left-straps
        left 28%
      &.right-straps
        right 28%

    .belt    /*腰带*/
      width 130px
      height 10px
      position absolute
      background-color #f7003b
      border: 1px solid #000
      top 119px
      z-index 3

双手构造

实现原理:实际上是两个不同颜色的椭圆,通过显示次序z-index达到层叠的效果,最后只露两边 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.arm-inside
    height 116px
    width 156px
    position absolute
    border: 1px solid #000
    background-color #ffef5e
    border-radius 61%
    top 136px
    left -13px
    z-index 1


  .arm-outside
    height 139px
    width 181px
    position absolute
    border: 1px solid #000
    background-color #fff
    border-radius 75%
    top 122px
    left -25px

裙子构造

实现:通过border-radius将裙子下摆削圆,width增加裙子宽度,再通过border-width放大下摆,最设置transparent,实现效果
裙子皱纹的实现:先定义一个基线line,其他线再根据基线进行rotate(),再稍微移一下位置,实现摆放 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.skirt
        border-color: #e9003a transparent
        border-style: solid
        border-width: 0px 57px 90px;
        left: -57px;
        position: absolute
        top: 251px
        width: 132px 
        z-index: 5
        border-radius: 0 0 50% 50%

        .line
          width 2px
          height 44px
          background-color #000000
          position absolute         
          top 23px
          left 64px
          transform-origin 0 0
          
          &.line1
            transform rotate(20deg)
            left 11%

          &.line2
            transform rotate(8deg)
            left 30%

          &.line3
            transform rotate(0deg)
          
          &.line4
            transform rotate(-8deg)
            left  68%
          
          &.line5
            transform rotate(-20deg)
            left 89%

大腿构造

1
2
3
4
5
6
7
8
9
10
11
12
13
.leg
    width 20px
    height 60px
    position absolute
    border 1px solid #000
    background-color #fadbc7
    top 333px
    z-index 4

    &.left-leg
     left 32px
    &.right-leg
     left 80px

袜子构造

实现: 由两部分组成foot和sock,sock部分设置下边框不显示,foot部分通过rotate()完成脚方向的设定 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.sock
    width 20px
    height 28px
    position absolute
    background #ffffff
    border-style solid
    border-width 1px 1px 0px 1px
    border-color #000000
    top 370px
    z-index 4

    &.left-sock
      left 32px
    &.right-sock
      left 80px
  
  .foot
    width 48px
    height 23px
    position absolute
    background-color #ffffff
    border: 1px solid #000
    border-radius: 80%
    top 383px
    transform-origin 0 0
    z-index 3

    &.left-foot
      transform rotate(-24deg)
      top 405px
      left 2px
    
    &.right-foot
      transform rotate(24deg)
      left 86px

鞋构造

实现:类似foot,rotate() 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.shoe
    width 67px
    height 34px
    position absolute
    background-color #a23030
    border-radius: 80%
    top 383px
    transform-origin 0 0
    z-index 2


    &.left-shoe
      transform rotate(-24deg)
      top 409px
      left -14px
    
    &.right-shoe
      transform rotate(24deg)
      left 86px

总结

使用stylus,大大提高了效率,非常nice!