国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

muzhuyu / 2348人閱讀

摘要：小丸子成長記程序員沒有對象怎么辦一個呀但是如果沒妹妹呢跟母猴子生一個呀哈哈哈那么怎么用打造一個天真無邪的小丸子呢最后效果一直有種錯覺這是旺仔準備工作安裝在項目目錄下新建和并在上引入命令行切換至項目目錄啟動實時刷新啟

小丸子成長記 
程序員沒有對象怎么辦?
--new 一個呀
但是如果沒妹妹呢?
--跟母猴子生一個呀
哈哈哈,那么怎么用stylus打造一個天真無邪的小丸子呢?
最后效果(一直有種錯覺這是旺仔???)

準備工作

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

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

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

構造小丸子整體結構

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

1張臉

頭發(fā)

脖子

身子,身子上穿了衣服

腰上有皮帶

兩只手

兩條腿,穿了紅裙子

腳,穿了紅鞋

所以總體結構就是

臉的構造

先設置基礎樣式

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中表現(xiàn)為

臉部基礎樣式

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

眉毛

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

眼睛

  實現(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%

耳朵

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

酒窩

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

嘴巴
實現(xiàn)原理:使用圓角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
鋸齒頭發(fā)構造

實現(xiàn):通過transform:skew()將盒子變成平行四邊形,然后通過rotate()將平行四邊形旋轉至角朝下,再通過位置調整,調整頭發(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
衣服 
整體分析:衣服有衣領,背帶,怎么讓背帶跟衣領完整的顯示在衣服中,不超過衣服盒子?

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

衣領實現(xiàn):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
雙手構造

實現(xiàn)原理:實際上是兩個不同顏色的橢圓,通過顯示次序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
裙子構造 
實現(xiàn):通過border-radius將裙子下擺削圓,width增加裙子寬度,再通過border-width放大下擺,最設置transparent,實現(xiàn)效果

裙子皺紋的實現(xiàn):先定義一個基線line,其他線再根據(jù)基線進行rotate(),再稍微移一下位置,實現(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
襪子構造 
實現(xiàn):由兩部分組成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
鞋構造 
實現(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!

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113100.html

相關文章

  • 辭掉房地產(chǎn)中介、賣章魚小丸子遇到困難、最后被逼無奈選擇軟件測試實現(xiàn)月薪24K...

    摘要：希望大家能在這個成長過程中收益良多。以后的生活就輕松很多。正所謂萬事開頭難，只要邁出了第一步，你就已經(jīng)成功了一半，古人說的好不積跬步，無以至千里。等到完成之后再回顧這一段路程的時候，你肯定會感慨良多。 ...

    lx1036 評論0 收藏0

  • 講清楚之 javascript 對象繼承

    摘要：中的繼承并不是明確規(guī)定的，而是通過模仿實現(xiàn)的。繼承中的繼承又稱模擬類繼承。將函數(shù)抽離到全局對象中，函數(shù)內部直接通過作用域鏈查找函數(shù)。這種范式編程是基于作用域鏈，與前面講的繼承是基于原型鏈的本質區(qū)別是屬性查找方式的不同。 這一節(jié)梳理對象的繼承。 我們主要使用繼承來實現(xiàn)代碼的抽象和代碼的復用，在應用層實現(xiàn)功能的封裝。 javascript 的對象繼承方式真的是百花齊放，屬性繼承、原型繼承、...

    Jonathan Shieber 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<