2024 iThome 鐵人賽規劃

2024 鐵人賽個人 iThome 頁面

在實務開發中，我們常常想為網站增添一些酷炫的特效，例如浮動粒子、浮雕效果等，來提升網站的互動性與趣味性。
然而，當我們使用的 UI 框架本身未支援這些特效時，往往需要自己手刻實現。雖然通常只要 Google 一下，就能很快找到相關的技術文章或教學影片，但似乎缺乏一個將這些常用特效集中整理的地方。
藉著這次鐵人賽的機會，我希望能夠親自實現、整理和分享這些特效的實作方法，讓大家能夠一次性地掌握這些實用的 CSS 技巧。

一天一項 CSS 小技巧：打造視覺與互動效果

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 天鐵人賽心得