摘要：小丸子成長(zhǎng)記程序員沒(méi)有對(duì)象怎么辦一個(gè)呀但是如果沒(méi)妹妹呢跟母猴子生一個(gè)呀哈哈哈那么怎么用打造一個(gè)天真無(wú)邪的小丸子呢最后效果一直有種錯(cuò)覺(jué)這是旺仔準(zhǔn)備工作安裝在項(xiàng)目目錄下新建和并在上引入命令行切換至項(xiàng)目目錄啟動(dòng)實(shí)時(shí)刷新啟

程序員沒(méi)有對(duì)象怎么辦?
--new 一個(gè)呀
但是如果沒(méi)妹妹呢?
--跟母猴子生一個(gè)呀
哈哈哈,那么怎么用stylus打造一個(gè)天真無(wú)邪的小丸子呢?
最后效果(一直有種錯(cuò)覺(jué)這是旺仔???)

npm安裝stylus---->npm install -g stylus

在項(xiàng)目目錄下新建wanzi.css,wanzi.styl和index,并在html上引入wanzi.css

命令行切換至項(xiàng)目目錄
啟動(dòng)live-server實(shí)時(shí)刷新 -->live-server
啟動(dòng)stylus,監(jiān)視wanzi.styl--->stylus -w wanzi.styl

先分析下小丸子的構(gòu)造,小丸子長(zhǎng)了:

1張臉

頭發(fā)

脖子

身子,身子上穿了衣服

腰上有皮帶

兩只手

兩條腿,穿了紅裙子

腳,穿了紅鞋

所以總體結(jié)構(gòu)就是

先設(shè)置基礎(chǔ)樣式

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

臉上有眼睛,耳朵,眉毛,酒窩,還有櫻桃嘴.所以可以看出都是嵌套關(guān)系,在stylus中表現(xiàn)為

臉部基礎(chǔ)樣式

.face
    background #fbdac7
    width 126px
    height 113px
    position absolute
    border 1px solid #000
    top 0
    left 20%
    border-radius 18px 40px 80px 80px

眉毛

   實(shí)現(xiàn)原理:設(shè)置width,height確定眉毛長(zhǎng)度,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)

眼睛

  實(shí)現(xiàn)原理:將盒子用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%

耳朵

 實(shí)現(xiàn)原理:設(shè)置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 

酒窩

   實(shí)現(xiàn)原理:設(shè)置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%

嘴巴
實(shí)現(xiàn)原理:使用圓角border-radius將盒子弄圓,通過(guò)定義偽元素after后的樣式,將偽元素背景顏色設(shè)置成臉部顏色,達(dá)到遮住嘴巴盒子上部分的效果,形成嘴巴的形狀

 .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

實(shí)現(xiàn):通過(guò)transform:skew()將盒子變成平行四邊形,然后通過(guò)rotate()將平行四邊形旋轉(zhuǎn)至角朝下,再通過(guò)位置調(diào)整,調(diào)整頭發(fā)位置

.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

整體分析:衣服有衣領(lǐng),背帶,怎么讓背帶跟衣領(lǐng)完整的顯示在衣服中,不超過(guò)衣服盒子?

實(shí)現(xiàn):通過(guò)在衣服盒子里設(shè)置overflow:hidden,隱藏超出盒子部分的元素,再通過(guò)z-index調(diào)整顯示次序,遮住被衣領(lǐng)蓋住的背帶部分

衣領(lǐng)實(shí)現(xiàn):tranform:rotate()旋轉(zhuǎn)至合適位置

.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    /*衣領(lǐng)*/
      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

實(shí)現(xiàn)原理:實(shí)際上是兩個(gè)不同顏色的橢圓,通過(guò)顯示次序z-index達(dá)到層疊的效果,最后只露兩邊

.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

實(shí)現(xiàn):通過(guò)border-radius將裙子下擺削圓,width增加裙子寬度,再通過(guò)border-width放大下擺,最設(shè)置transparent,實(shí)現(xiàn)效果

裙子皺紋的實(shí)現(xiàn):先定義一個(gè)基線line,其他線再根據(jù)基線進(jìn)行rotate(),再稍微移一下位置,實(shí)現(xiàn)擺放

.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

實(shí)現(xiàn):由兩部分組成foot和sock,sock部分設(shè)置下邊框不顯示,foot部分通過(guò)rotate()完成腳方向的設(shè)定

.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

實(shí)現(xiàn):類似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!