CSSFX 最美的 CSS 動態效果一鍵複製，提升使用者操作體驗

前陣子介紹過「CSSeffectsSnippets 收錄 CSS 動態效果，線上預覽一鍵複製程式碼」這個很有趣的網站，事實上現今 CSS 樣式表可以做的事越來越多，甚至透過幾段原始碼達到動態效果，看起來不僅互動性高，還能提升使用者體驗，完全不用額外載入其他的 JavaScript 程式庫，只不過這些原始碼不一定每個人都會寫，利用 CSSeffectsSnippets 網站直接線上預覽，找到需要的動態效果後就會給出相關 CSS 原始碼（和早期在學習做網頁很像）。

本文要推薦的「CSSFX」和 CSSeffectsSnippets 有點類似，不過兩邊收錄的動態效果略有不同，舉例來說，將滑鼠游標移動到按鈕上方會有動態效果變色，或是點選輸入框（Input）後外圍線條會動態選取變化顏色，此外，CSSFX 還有收錄一些載入動畫特效、文字樣式效果，打開網頁就能看到這些範例，有些會在移動到上方時開始動作。

CSSFX 提供的都是非常簡單、易於套用到各種網站的 CSS 效果，這些精心設計的動畫將重點放在流動性、簡潔性和易用性，看起來非常舒服，動態效果和網站整合恰到好處，CSSFX 產生的 CSS 程式碼皆使用最精簡原始碼，完全開放原始碼並以 MIT 授權。

網站名稱：CSSFX
網站鏈結：https://cssfx.dev/

使用教學

STEP 1

開啟 CSSFX 網站會看到非常多的動態效果，這些都是使用純 CSS 樣式原始碼實現。

有些效果是當滑鼠游標移動過去（例如按鈕、文字樣式）或點選輸入框才會出現，動畫看起來非常平順、質感很好，如果使用得當還能讓整體操作體驗加分不少。

STEP 2

點選你要使用的動畫效果，CSSFX 就會顯示出對應的 HTML、CSS 程式碼，可以發現 CSSFX 提供的代碼都很簡潔，利用 Highlight 效果更容易閱讀每一段的作用效果。

只要點選 CSS 和 HTML 右上角的「Copy」就能複製程式碼，將它運用到自己的網站中，有部分功能可能需要稍微修改、調整一下才能看到效果，對於有基礎的開發人員來說應該不會太困難。