重點整理

在這次的 CSS Challenge 中，我們學到了許多值得重視的重點與技術，以下是一些關鍵學習點的總結：

• Grid 與 Flexbox 的應用：瞭解了如何在佈局上靈活使用 grid 和 flexbox 來製作響應式排版，尤其是如何使用 grid-template-columns 與 gap 來控制元素間距和比例。我個人也是非常推薦大家不一定要使用 position:absolute 來做版面的排版，而可以多去思考是否可以使用 grid 來創造一樣的效果。
• 動畫與過渡效果：通過 @keyframes 及 transition，我們學習到如何創建平滑的動畫效果，比如物件的旋轉、移動、縮放等，並掌握了 animation-fill-mode 和 transform 的精確使用。
• CSS 自定義變數與重複利用：使用 SCSS 等預處理器，我們能夠靈活地利用變數來控制寬度、高度、顏色等屬性，減少重複代碼，提升樣式的一致性和可維護性。
• 偽元素與物件的屬性：透過 ::before 和 ::after 來輕鬆地創建附加的樣式效果，如陰影、背景覆蓋等，並且更加了解每個物件的基本屬性。有時候能使用偽元素就能夠完成的東西，實在不需要多開一個 div，這也是在很多時候需要去思考的地方。
• box-shadow 的創意運用：探索了 box-shadow 的多層陰影效果，創造立體感和深度，學習到如何透過調整模糊半徑和顏色來達成不同的視覺效果。
• SASS @for 迴圈與模組化設計：透過 @for 迴圈，我們可以批量產生動態 class 和樣式，進一步實現設計模組化與高效編碼。
• 透視與 3D 動畫：使用 perspective 和 transform-style: preserve-3d，我們創建了 3D 翻轉效果，讓視覺動畫更加生動。

感想

我自己其實對於寫動畫在以前蠻排斥的，但在這次 CSS Challenge 中，我也開始慢慢能享受寫動畫的樂趣，動畫就是一種你花很多時間寫，但卻可能幾秒就跑完的東西，但這就跟我們爬山一樣，花很多時間爬，只是為了山頂上那一瞬間的美景。在過程中你會遇到很多有趣的事情，不要害怕去面對與挑戰，過後就會發現自己學習到了很多。

另外，我還記得以前在遊戲橘子的時候，當時我是 UI Designer，我當時要負責產出網頁 A/B Testing 的兩個版本網頁，還記得當時主管要求我做一個 flip-page 的動畫，但我卻做不出來。當時還有很多 Javascript 的效果也是我當時身為一個 Designer 做不出來的，但現在卻覺得這個動畫如此簡單。
偶爾這樣回顧一下會覺得自己成長很多。

這次寫鐵人，本來只是跟同事們開玩笑一起寫的，沒想到第一次寫鐵人就完賽，很意外也很開心。
在報名的當天，我才在創帳號，研究怎麼使用這個網站，雖然在最後一秒沒有成團，但還是感謝 GMT+4 的同事們。
我很開心能跟大家一起寫鐵人，希望之後還有機會跟大家一起參與這種有意義的活動。