Day34 鈕紐捏捏

簡單小語

看到這麼多的按鈕效果，真的是看得鈕鈕捏捏，忍不住就想挑戰想練習，總共16個效果，有些想破腦筋，有些熟能生巧，不斷的刷新就是看自己的效果有沒有出來，總還是有2個效果無法達成與樣本相同，有些設定也是參考樣板所寫出，看來CSS的世界果然遼闊無邊際，學得只是冰山一角，不過也就是這樣才能更督促自己，努力進步跟學習囉，話說JavaScript更難…..。

筆記分享

1. 總共18個li，但有2個是利用opacity:0來製造有佔住空間但消失的物件。
2. RWD時就讓2個li呈現display:none的方式，移出空間。
3. 偽元素的大量練習，不斷利用before，after去創造新的樣式。
4. 呈現樣式的方式有opacity，transform:scale()，width，height，transform:translateXY()，搭配hover呈現效果。
5. 第四個先利用li的before及after製作三角形，然後再用a的before及after去製作新的邊框。
6. 第六個利用li，a的before及after，製作四個邊框的移動效果，其中讓一邊的時間慢0.5秒，視覺落差效果感。
7. 第八個學到新得效果， perspective: 300px;，transform-style: preserve-3d;呈現翻轉的效果，雖然應用還不是很熟悉，至少參考樣板能夠使用。
8. 第九個利用linear-gradient先切好三段後(白黑白)，再用transform:rotate()及transform:scale()放大然後要在父層使用overflow:hidden，才不會溢出。
9. 最後四個製作時候卡關，要如何讓消失及結束都從同一個地方開始，後來不斷的嘗試才寫出(但還是有不足地方)，主要就是top，bottom，right，left的靈活運用，決定效果出現結束依據。
10. 可惜第11，12個效果依目前能力尚未解鎖，未來更上一層後，一定回來擊敗你們。

持續練習

Practice(200831 Day 34)

樣板來源

Black&White Button

2020 iT邦幫忙鐵人賽 Day34 網頁前端-持續練習(鈕紐捏捏)