Day28 六角 模仿遊戲#1

簡單小語

這個週末偷懶了一下，多花了點時間完成這個模仿遊戲，再次把最近學到的To Do List給放進來刻意練習一遍，JavaScript真的比HTML/CSS難上一階，既然先前沒有好好學習程式，現在就是別人更努力學習，花更多時間追上大家水平，這個版面一看到就覺得很多動畫效果是可以練習的，果然在JQuery那邊花了點時間釐清每一步動作需要執行的結果，使用開發者工具看點擊狀態真的很重要，不然一直憑空想像，根本不知道效果卡在哪裡，透過動態改變就可以知道是哪裡hen住了，開始全面改用.on(‘click’,function(){})製作效果，Keep Going。

筆記分享

1. banner使用padding抓好距離並在不同尺寸呈現不同樣式。
2. 讓btn透過JQuery效果在hover後可以將放大鏡slideDown。
3. 讓btn透過hover效果:after:hover後可以將透明灰背景出現。
4. 將content放在li中根據不同尺寸定位在不同物件上。
5. 使用:nth-child(n+5)選取到第五個以後的物件(一開始還想超久，真呆)。
6. content透過z-index, opacity 及 top的結合運用，讓點擊後出現slideDown及漸變效果。
7. close則是老樣子定位完後透過box-shadow製造分身然後用transform:rotate()旋轉製作”X”。
8. content在小尺寸中則是改變定位物件及呈現方式，透過transform:scale(0,1)在點擊後呈現放大效果出現。
9. 因為在IPAD中不適合小尺寸樣式，因此斷點改為max-width=768px。
10. z-index的使用需了解每個物件的優先度，避免一開始To Do List無法cursor的囧境。

刻意練習

Practice(200824 Day 28)

樣板來源

Balkan Style — Portfolio Gallery

2020 iT邦幫忙鐵人賽 Day28 網頁前端-刻意練習(模仿遊戲#1)