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

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

程序员没有对象怎么办?
--new 一个呀
但是如果没妹妹呢?
--跟母猴子生一个呀
哈哈哈,那么怎么用stylus打造一个天真无邪的小丸子呢?
最后效果(一直有种错觉这是旺仔???)

npm安装stylus---->npm install -g stylus

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

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

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

1张脸

头发

脖子

身子,身子上穿了衣服

腰上有皮带

两只手

两条腿,穿了红裙子

脚,穿了红鞋

所以总体结构就是

先设置基础样式

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!