iT邦幫忙

第 12 屆 iThome 鐵人賽

0
自我挑戰組

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

Day37 網頁前端-持續練習(電光一閃)

Day37 電光一閃

https://ithelp.ithome.com.tw/upload/images/20201006/20129161fsMoMwmHi4.png
https://ithelp.ithome.com.tw/upload/images/20201006/20129161coZIhQaUHX.png

簡單小語

為什麼叫電光一閃呢?因為每個在hover後都是快速閃一下,一時興起就來的電光一閃吧(衝吧皮卡丘,宅ing),看到好多樣式,於是乎又給自己挑戰的機會,不過依舊有幾個無法達到樣板的樣式,高手真的好多,小魯會的真的只是冰山一角,但每次看到一些覺得自己可能可以但又沒有十足把握的樣板,就會給自己挑戰,即便有些做不出來,但也能嘗試思考樣板到底怎麼做的,其中個人最佩服的是第二個"Position Aware"那個效果真的超酷,但小魯我做不出來哈哈,就連看JS也一知半解,希望未來某天的我看到這個樣式,會能夠即刻想到方法並實作出來。

筆記分享

  1. 確認HTML架構,排出基本框架並確認好每個物件長寬,個人習慣樣式及高度(padding)設定a標籤(display:block),寬度設定在li標籤。
  2. 套用AOS套用上癮了,但風險是我overflow:hidden的樣式會在還沒pop up前被hover到的話會漏陷。
  3. 或許可以考慮練習SCSS了,現在有感覺重複的樣式若純CSS變的超冗長又複雜。
  4. :before, :after靈活運用,主要用到libutton的偽元素,達成四種不同的樣式效果。
  5. 利用overflow:hidden可以避免欲出現的樣式外露,很牛逼的功能呢,讓我隱藏了好多樣式(你看不到我你看不到我…)。
  6. 掌握位置,掌握樣式,跳脫li的框框思考但入淡出該呈現的模樣,理論上可以達成80%效果。
  7. 因為POSITION AWARE做不出來,改作POSITION LINEAR用時間差的感覺呈現樣式,困惑你我。
  8. 比較可惜的是SLICE的三角形長寬寫死,不知道為何在偽元素border%數會抓不到數值,明明有使用relative定位在父層,懇求大大解惑。
  9. COLLISION也有問題,用transform:scale(5)後的擴散會蓋住border,改了幾個z-index還是沒頭緒,細節確實有待加強。
  10. RWD為避免樣式擠壓變形,就獨立每一個Button為一行,當然就是為了不讓overflow:hidden露餡(各種幻覺啊)。

持續練習

Practice(200903 Day 37)

樣板來源

Button Hover Effects


2020 iT邦幫忙鐵人賽 Day37 網頁前端-持續練習(電光一閃)


上一篇
Day36 網頁前端-持續練習(風琴萬種)
下一篇
Day38 網頁前端-持續練習(隨點隨到)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言