前端入門簡單，真正精通卻不那么容易

就css來說，會使用css做頁面布局也只是第一步，css遠(yuǎn)比想象中的要強(qiáng)大。

js很多效果都可以利用css各種屬性和偽元素，制作出來，而且比起js還要方便快速

這是一個菜單按鈕的效果，成為焦點后會變成一把叉，在焦點移除后會還原會菜單形狀
這時就可以配合js做狀態(tài)管理寫出一個完整的下拉菜單或者側(cè)拉菜單了
之后也會使用在我的vue2.0項目中，如果爺您有興趣可以移步到項目地址處視察視察，如果爺開心了就加個星

具體的效果是這樣的

rotate menu button by css

寫代碼要信奉“能偷懶就偷懶”原則，在保證實現(xiàn)效果的基礎(chǔ)上，絕不多寫一個標(biāo)簽，多寫一段代碼
所以上面的效果咋一看需要至少4個標(biāo)簽才能寫完，其實只用了一個標(biāo)簽
用button標(biāo)簽做父元素，用兩個偽元素做兩個橫桿
問：“那還有一個橫桿呢？”
是這樣，通過觀察效果圖，發(fā)現(xiàn)其實由菜單圖標(biāo)變換到X圖標(biāo)只需要其中的兩個橫桿。
所以第三個橫桿我使用了box-shadow屬性來模擬，說到底，其實第三個橫桿只是第二個橫桿的投影而已

核心使用

• 屬性：transform-origin, transform, box-shadow, transition
• 偽元素：:before, :after

代碼標(biāo)簽是用pug語法寫的，css是stylus語法寫的，這兩種語法都比較簡單，如果會使用css選擇器就可以看懂
下面也會簡單的說明下

話不多說，上代碼

button#btn.b-menu
// pug語法里的'#'和'.'同css里一樣'#'為id，'.'為class
label(for="btn") click
// 除了id與class以外的屬性要如上面的形式寫在括號里
    
// 這里擴(kuò)展出來就是
// <button id="btn" class="b-menu"></button>
// <label for="btn">click</label>

// stylus是css的預(yù)編譯器的一種，簡化了css的寫法，結(jié)構(gòu)更加清晰
// 這里就不過多的陳述了，有疑問可以下方留言詢問
 
// 先去除button的默認(rèn)樣式
button
  border none
  outline none
  box-shadow none
  background none
  color currentColor
  padding 0
  cursor pointer
 
// 關(guān)鍵的部分開始了
.b-menu
  width 25px
  height 25px
  position relative
  &:before, // before是第一橫桿，after是第二個橫桿
  &:after // stylus里的&表示承接上文的意思,這里也就等同于.b-menu:after
    content ' '
    position absolute // 使用絕對定位到目標(biāo)位置
    background-color #fff
    display block
    width 100%
    height 3px
    left 0
    top 11px
    border-radius 3px
    transition all .5s
    transform-origin 50% 50% // 設(shè)置變換中心點，這個很重要，直接影響到后面的效果
  &:before
    transform translateY(-6px) // 第一個橫桿向上偏移，這里使用transform而不使用top屬性是為了方便后面的使用
  &:after
    box-shadow 0 6px 0 0 #fff
  &:focus:before // 通過focus獲取焦點，來觸發(fā)起偽元素的變化
    transform rotateZ(45deg) translateY(0)
  &:focus:after
    box-shadow 0 0 0 0 #fff
    transform rotateZ(135deg) translateY(0)

這個是開關(guān)的效果

效果是這樣的（duang!duang!daung!）

switch button

這里是switch button演示地址

開關(guān)效果又比之前那個復(fù)雜，switch的原理其實就是checkbox，
因為input是單標(biāo)簽，所以無法使用偽元素，這里就用到了label

核心使用

• 屬性：transform, background-size, border-radius, border-width, transition, cubic-bezier
• 標(biāo)簽：label
• 偽元素：:before, :after

代碼如下：
html

input(id="switch",type="checkbox").b-switchBtn
label(for="switch").b-switchLabel
// label標(biāo)簽利用for屬性與相應(yīng)id的input標(biāo)簽綁定，從而達(dá)到點擊label就是點擊input的效果

css

button,
input
  border none
  outline none
  box-shadow none
  background none
  color currentColor
  padding 0
  cursor pointer
  
.b-switchLabel
  position relative
  display inline-block
  width 60px
  height 25px
  input
    display none
  &:before, // before 作為白條
  &:after // after 作為水滴狀開關(guān)
    content ' '
    display block
    position absolute
  &:before
    width 100%
    height 4px
    background-color #fff
    left 0
    top 50%
    border-radius 5px
    transform translateY(-50%)
  &:after
    background-image url('http://upload-images.jianshu.io/upload_images/2005796-fcc62a13bd69f679.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240')
    // 因為css不好寫出漂亮的水滴效果，所以這里取巧用了圖片
    background-size cover // 利用這個屬性縮放原來太大的圖片
    height 25px
    width 25px
    left 23%
    top 51%
    border-radius 25px
    transform-origin center center // 老套路，定下變換中心點
    transform translate(-50%, -50%) // 矯正left和top的偏移
    background-clip border-box // 利用border-box屬性值來使背景圖片在border上也能顯示
    background-position 50% 50%
    border-style solid
    border-color transparent // 設(shè)置透明border有助于背景的顯示
    border-width 0 3px 0 0
    transition all .5s cubic-bezier(0.4, -0.95, 0.4, 1.8) // 設(shè)置貝塞爾曲線以達(dá)到Duang的效果
.b-switchBtn
  display none
  &:checked~.b-switchLabel // 設(shè)置開關(guān)在被選中時改變狀態(tài)，配合transition就動了起來
    &:after
      left 78%
      border-width 0 0 0 3px

有疑問的或者有建議的可以在下方留言