CSSeffectsSnippets 收錄 CSS 動態效果，線上預覽一鍵複製程式碼

網頁設計師或網站開發者一定對 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 找找有沒有符合自己需求的效果。