文章同步更新在 CodeFictionist

一眨眼就 30 天了，鐵人賽就這樣完成了，在寫這篇鐵人 30 感想時猶感到一絲不真實。
其實打從我剛踏進軟體開發的領域、成為一名前端工程師，我就告訴自己人生一定要參加一次鐵人賽。在 2024 年的元旦，我把參加鐵人賽列為今年的一大目標，很高興，截至今天，我完成了這項目標。

其實連續 30 天寫文章真的不容易，尤其是還要寫出言之有物的內容更是需要花大量的心力與時間。在這 30 天中，除了週末，真的是上班完、吃個晚餐、健個身就開始寫範例、寫文章，有時候麻煩一點或腦筋抽到，花個 2-3 小時也是有的，但無論如何，這 30 天真的是收穫頗豐。

這次的主題環繞著 CSS 特效，其實當初想做這個主題真的就是基因於一個想要好好統整一下一些有趣的 CSS 特效的念頭。再加上我自認是個寫功能較多的前端，雖然切版沒什麼問題，但動畫特效這一類一直是我的短版，也剛好趁這個機會把它補強起來，所以才會以 CSS 為這次的挑戰賽主題。
不得不說，30 天寫完，我看 transform 看到快吐了 www。

其實這個挑戰就像我的夥伴 Chloe 說的這是一個很需要毅力的過程，誠然，連續 30 天的自主學習並撰文，肯參與這個挑戰的人我覺得都值得為他獻上掌聲。
然後我要在這裡也把我的掌聲獻給我的夥伴：mimirjp、Scott、Chloe。
mimirjp 是我很好的研究所朋友，現任數據分析師、過去曾擔任數據工程師，這次剛邀請他一同參加就立馬答應我了，讓我有種回到研究所一同奮鬥的感覺。
Scott 跟 Chloe 是每週三、六和我一起練英文的好夥伴，這次在開賽前夕被我洗腦一個衝動就參加了這次鐵人賽，在過去他們可是從未接觸過軟體相關的東西，能這樣撐 30 天過來，我除了敬佩真的也只剩敬佩了。
也謝謝上面提到的三位夥伴，30 天，也是因為有他們，就這樣咻地過去了。

總而言之，2024 的鐵人賽我完賽了，尚未完賽的朋友們繼續加油！
希望大家也喜歡我這 30 天的 CSS 小技巧系列，雖然我後面越寫越水 www
就醬吧，各位，也許我們明年見？(花個一年思考一下要不要再來一次 www)

下面附上這 30 天的目錄：

Day 01 - 05：動畫與變形基礎

• Day 01：CSS 動畫基礎
  介紹 @keyframes 及如何運用動畫來提升網站的動態效果。
• Day 02：CSS 變形基礎
  介紹 transform 的基本應用，包括旋轉、縮放、移動和傾斜等效果。
• Day 03：複合動畫
  結合 @keyframes 與 transform 創造更複雜的動畫效果。
• Day 04：animation vs transition
  探討 animation 與 transition 兩者之間的差異與適用情境。
• Day 05：3D 變形
  使用 transform 的 3D 效果來創造更立體的視覺效果。

Day 06 - 12：圖片與背景

• Day 06：多重背景
  使用 background 屬性為元素設定多個背景圖片或顏色。
• Day 07：模糊與濾鏡效果
  運用 filter 和 backdrop-filter 來為圖片背景增加模糊或其它濾鏡效果。
• Day 08：圖片懸停縮放效果
  當滑鼠懸停時，圖片會進行縮放的視覺效果。
• Day 09：漸變背景動畫
  透過 background 及 @keyframes 創造背景的漸變動畫效果。
• Day 10：圖片遮罩效果
  使用 mask 創造圖片的遮罩效果。

Day 11 - 19：文字特效

• Day 11：漸變文字效果
  使用 background-clip 和 linear-gradient 為文字添加漸變效果。
• Day 12：文字陰影動畫
  結合 text-shadow 和 @keyframes 為文字創造陰影的動畫效果。
• Day 13：文字遮罩效果
  利用 background 和 background-clip 來創造文字的簍空效果。
• Day 14：打字機效果
  模擬打字機輸入文字的效果，讓文字一個字一個字地出現。
• Day 15：壓縮文字效果
  讓文字在滑鼠滑過時有壓下去的感覺。
• Day 16：彈跳文字效果
  讓文字在滑鼠滑過時有跳起來的感覺。
• Day 17：彈跳文字最終回
  壓下去又談起來的合併效果。
• Day 18：文字爆炸特效
  結合一點 JavaScript 創造爆炸的四散文字效果。
• Day 19：跑馬燈文字
  透過 @keyframes 創造文字跑馬燈的動畫效果。

Day 20 - 26：互動特效

• Day 20：懸停旋轉效果
  當滑鼠懸停時，元素會進行旋轉的互動效果。
• Day 21：平滑滾動效果
  使用 scroll-behavior 來創造滾動時的平滑過渡效果。
• Day 22：粒子浮動效果
  透過 @keyframes 和 animation 實現粒子漂浮在頁面上的效果。
• Day 23：波浪效果
  創造類似水波的效果，讓元素有波動的視覺效果。
• Day 24：按鈕彈跳效果
  當滑鼠點擊時，按鈕會產生彈跳的動畫效果。
• Day 25：元素懸停浮空效果
  當滑鼠懸停在元素上時，元素會浮空的視覺效果。
• Day 26：元素區塊捲動效果
  使用 scroll-snap-type 來創造滑鼠輕輕滾動就自動到下一個區塊的效果。

Day 27 - 30：其他特效

• Day 27：浮雕效果
  使用 box-shadow 創造元素或文字的浮雕效果。
• Day 28：元素拖拉移動
  使用 draggable 屬性和 JavaScript 實現元素的拖拉移動效果。
• Day 29：輪播
  使用 CSS 搭配 JavaScript 實現簡單的輪播效果。
• Day 30：30 天鐵人賽心得