前陣子介紹過「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」就能複製程式碼,將它運用到自己的網站中,有部分功能可能需要稍微修改、調整一下才能看到效果,對於有基礎的開發人員來說應該不會太困難。

值得一試的三個理由:

  1. 收錄 45 種以 CSS 方式呈現的網頁動態效果
  2. 線上預覽後可快速複製 HTML 和 CSS 程式碼
  3. 開放原始碼採用 MIT 授權