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

小丸子成长记

程序员没有对象怎么办?
--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. 脚,穿了红鞋

所以总体结构就是

脸的构造

先设置基础样式

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中表现为

脸部基础样式

.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()确定眉毛摆放倾斜程度

.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影响眼睛大小,形状

.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影响耳朵大小,形状

.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影响酒窝大小,形状

.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后的样式,将伪元素背景颜色设置成脸部颜色,达到遮住嘴巴盒子上部分的效果,形成嘴巴的形状

.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()将平行四边形旋转至角朝下,再通过位置调整,调整头发位置

.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

脖子

.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()旋转至合适位置

.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达到层叠的效果,最后只露两边

.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(),再稍微移一下位置,实现摆放

.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%

大腿构造

.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()完成脚方向的设定

.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()

.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!