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

時間 2019-12-04

標籤丸子成長 stylus 下用 div+css div css 一步打造欄目 HTML 简体版

原文原文鏈接

小丸子成長記

程序員沒有對象怎麼辦?
--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

構造小丸子總體結構

先分析下小丸子的構造,小丸子長了:css

1張臉html
頭髮
脖子
身子,身子上穿了衣服
腰上有皮帶
兩隻手
兩條腿,穿了紅裙子
腳,穿了紅鞋

因此整體結構就是程序員

臉的構造

先設置基礎樣式npm

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中表現爲ide

臉部基礎樣式spa

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

眼睛3d

實現原理:將盒子用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%

耳朵code

實現原理:設置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

酒窩orm

實現原理:設置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!

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。