網頁設計師或網站開發者一定對 CSS 不陌生,CSS 中文是階層式樣式表,通常會簡稱為樣式表,主要是用來控制網頁中看到的各種樣式,例如文字大小、間距、背景色、頁面布局或各種元素呈現的方式。隨著現今大部分瀏覽器都已經支援 CSS3,在 CSS3 也加入許多新的功能,其中也支援動畫和立體效果,這都讓網頁能有更多更不同的變化,也不需要再使用舊方法,讓效果在編寫及管理上更輕鬆。

如果你想知道透過 CSS 程式碼可以做到那些動態效果,CSSeffectsSnippets 是你可以去尋寶的網站,這個網站收錄大約 20 多種 CSS 動畫,無論是載入讀取中,或是將游標移動過去產生的動畫,都能在網站上即時預覽。

CSSeffectsSnippets 最值得推薦的是所有效果都能在點選後快速複製相關程式碼,直接讓開發者取用,運用到自己的網站或部落格,當然可能還是需要經過微調,不過不用從頭開始,也不需在網路上尋找這些動畫代碼,非常方便而且省時。

CSSeffectsSnippets 也是開放原始碼專案,可以從 GitHub 找到相關說明。

網站名稱:CSSeffectsSnippets
網站鏈結:https://emilkowalski.github.io/css-effects-snippets/

使用教學

STEP 1

開啟 CSSeffectsSnippets 網站可以看到所有收錄的 CSS 動畫效果,有些 Hover me 的按鈕或鏈結是要將游標移動上去才會出現效果,大家可以自己打開網站實際體驗一下,原來目前的 CSS3 已經能做這麼多動畫,實在非常強大!

STEP 2

點選要使用到自己網站的 CSS 效果,下方會出現綠色的 Copied to clipboard 提示訊息後表示相關程式碼已經複製到剪貼簿。

貼回到編輯器就能看到程式碼囉!前面有提到程式碼可能還是要經過微調才能正常在網站上使用,不過不用自己編寫真是太好了,若開發網站或應用程式需要 CSS 動畫,可以到 CSSeffectsSnippets 找找有沒有符合自己需求的效果。

值得一試的三個理由:

  1. 收錄超過 20 種 CSS3 動畫動態效果
  2. 可直接線上預覽,快速複製程式碼
  3. 開放原始碼,從 GitHub 專案頁面找到更多說明