Day37 電光一閃

簡單小語

為什麼叫電光一閃呢?因為每個在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靈活運用，主要用到li及button的偽元素，達成四種不同的樣式效果。
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 網頁前端-持續練習(電光一閃)