iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

1
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 34

Day34 網頁前端-持續練習(鈕紐捏捏)

Day34 鈕紐捏捏

https://ithelp.ithome.com.tw/upload/images/20201004/201291616ykarAB1dQ.png
https://ithelp.ithome.com.tw/upload/images/20201004/20129161SrG9Oa2AAZ.png

簡單小語

看到這麼多的按鈕效果,真的是看得鈕鈕捏捏,忍不住就想挑戰想練習,總共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. 第四個先利用libeforeafter製作三角形,然後再用abeforeafter去製作新的邊框。
  6. 第六個利用li,abeforeafter,製作四個邊框的移動效果,其中讓一邊的時間慢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 網頁前端-持續練習(鈕紐捏捏)


上一篇
Day33 網頁前端-持續練習(透明人間)
下一篇
Day35 網頁前端-持續練習(大俠漢堡)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言