鐵人檔案
這系列文章記錄自己在開發中，面對各種視覺與 UI 需求時的實作經驗。內容涵蓋 CSS Grid 雙軸響應式、SVG 向量應用、DOM 動態特效與主題切換。
昨天我們了解了動畫的效能代價，今天正式進入實作篇。 之前專案做過一個令人印象深刻的動態效果。設計稿是一個佈告欄上有幾張被膠帶貼住的紙片，原本只是靜態。專案的整體...
昨天做佈告欄時，已經先用了一點 3D：perspective() 搭配 rotateX()，讓紙片被掀起時有立體感。今天就把 CSS 3D 完整拆開來，先認識...
動畫寫得很爽，一不小心維護火葬場。今天想換個角度：動畫寫出來之後，要怎麼維護？ 曾經遇過這種情況：同一隻吉祥物可以切換多個主題與表情。每個主題各自一份元件，動畫...
面對重複出現卻略微不同的動態效果，Day23 把「差異」抽成了參數。今天我們換個角度想：如果動畫本來就是這張圖的一部分，不如讓它「跟著圖」走？ 之前看專案時發現...
雖然開頭說會以網頁動畫做為最後一個子題，但是寫到後面發現預先規劃好的內容，比起動畫，更偏向滑鼠、滾輪事件這類互動效果。到最後幾天突然鬼轉，實作範例存量不夠了有沒...
昨天手寫了拖曳，選項放到圖釘後，只是變淡（used）而已。但如果選項變多、名稱變長，選項列表會變成可以左右滑動；這時為了讓使用者優先看到還沒填寫的選項，希望能「...
