Skip to main content

Day 0 - 2024 iThome 鐵人賽規劃

2024 鐵人賽個人 iThome 頁面

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

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

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

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

Day 06 - 12:圖片與背景

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

Day 11 - 19:文字特效

  • Day 11:漸變文字效果
    使用 background-cliplinear-gradient 為文字添加漸變效果。
  • Day 12:文字陰影動畫
    結合 text-shadow@keyframes 為文字創造陰影的動畫效果。
  • Day 13:文字遮罩效果
    利用 backgroundbackground-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:粒子浮動效果
    透過 @keyframesanimation 實現粒子漂浮在頁面上的效果。
  • 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 天鐵人賽心得