前端入門簡(jiǎn)單，真正精通卻不那么容易
就css來說臀晃，會(huì)使用css做頁面布局也只是第一步衙四，css遠(yuǎn)比想象中的要強(qiáng)大。
js很多效果都可以利用css各種屬性和偽元素己沛，制作出來，而且比起js還要方便快速
這是一個(gè)菜單按鈕的效果距境，成為焦點(diǎn)后會(huì)變成一把叉申尼，在焦點(diǎn)移除后會(huì)還原會(huì)菜單形狀
這時(shí)就可以配合js做狀態(tài)管理寫出一個(gè)完整的下拉菜單或者側(cè)拉菜單了
之后也會(huì)使用在我的vue2.0項(xiàng)目中，如果爺您有興趣可以移步到項(xiàng)目地址處視察視察垫桂，如果爺開心了就加個(gè)星
具體的效果是這樣的
這里是menu按鈕的演示地址
寫代碼要信奉“能偷懶就偷懶”原則师幕，在保證實(shí)現(xiàn)效果的基礎(chǔ)上，絕不多寫一個(gè)標(biāo)簽诬滩，多寫一段代碼
所以上面的效果咋一看需要至少4個(gè)標(biāo)簽才能寫完霹粥，其實(shí)只用了一個(gè)標(biāo)簽
用button標(biāo)簽做父元素，用兩個(gè)偽元素做兩個(gè)橫桿
問：“那還有一個(gè)橫桿呢疼鸟？”
是這樣后控，通過觀察效果圖，發(fā)現(xiàn)其實(shí)由菜單圖標(biāo)變換到X圖標(biāo)只需要其中的兩個(gè)橫桿空镜。
所以第三個(gè)橫桿我使用了box-shadow屬性來模擬浩淘，說到底捌朴，其實(shí)第三個(gè)橫桿只是第二個(gè)橫桿的投影而已
核心使用
- 屬性：
transform-origin,transform,box-shadow,transition - 偽元素：
:before,:after
代碼標(biāo)簽是用pug語法寫的，css是stylus語法寫的张抄，這兩種語法都比較簡(jiǎn)單砂蔽，如果會(huì)使用css選擇器就可以看懂
下面也會(huì)簡(jiǎn)單的說明下
話不多說，上代碼
button#btn.b-menu
// pug語法里的'#'和'.'同css里一樣'#'為id署惯，'.'為class
label(for="btn") click
// 除了id與class以外的屬性要如上面的形式寫在括號(hào)里
// 這里擴(kuò)展出來就是
// <button id="btn" class="b-menu"></button>
// <label for="btn">click</label>
// stylus是css的預(yù)編譯器的一種左驾，簡(jiǎn)化了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是第二個(gè)橫桿
&:after // stylus里的&表示承接上文的意思,這里也就等同于.b-menu:after
content ' '
position absolute // 使用絕對(duì)定位到目標(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è)置變換中心點(diǎn)，這個(gè)很重要怀酷，直接影響到后面的效果
&:before
transform translateY(-6px) // 第一個(gè)橫桿向上偏移稻爬，這里使用transform而不使用top屬性是為了方便后面的使用
&:after
box-shadow 0 6px 0 0 #fff
&:focus:before // 通過focus獲取焦點(diǎn)，來觸發(fā)起偽元素的變化
transform rotateZ(45deg) translateY(0)
&:focus:after
box-shadow 0 0 0 0 #fff
transform rotateZ(135deg) translateY(0)
這個(gè)是開關(guān)的效果
效果是這樣的（duang!duang!daung!）
開關(guān)效果又比之前那個(gè)復(fù)雜蜕依，switch的原理其實(shí)就是checkbox桅锄，
因?yàn)閕nput是單標(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á)到點(diǎn)擊label就是點(diǎn)擊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')
// 因?yàn)閏ss不好寫出漂亮的水滴效果，所以這里取巧用了圖片
background-size cover // 利用這個(gè)屬性縮放原來太大的圖片
height 25px
width 25px
left 23%
top 51%
border-radius 25px
transform-origin center center // 老套路檐束，定下變換中心點(diǎn)
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)在被選中時(shí)改變狀態(tài)辫秧，配合transition就動(dòng)了起來
&:after
left 78%
border-width 0 0 0 3px
有疑問的或者有建議的可以在下方留言
