36個 CSS 學習網站，總有一款讓你中意

1.基礎學習篇

CSS 參考書

cssreference.io/

CSS 靈感

https://chokcoco./CSS-Inspiration/#/

UI 設計師的靈感源泉

https://www./sites/zero-impact

交互式在線 CSS 速記表

htmlcheatsheet.com/css/

學習 CSS 布局

zh.learnlayout.com/

CSS 小花招

css-tricks.com/

web.dev 上的 CSS 教學專欄

web.dev/learn/css/

W3 How To 學習如何實現常見的頁面組件

www.w3schools.com/howto/

450 多個純 CSS 實現的 UI 設計

https:///tag/pure-css/

2.CSS 動畫篇

CSS 動畫集

animate.style/

不過腦子的動效，不過看起來很“猛”

tholman.com/obnoxious/

CSS 抖動特效

elrumordelaluz./csshake/

CSS 三維變換動畫

animxyz.com/

CSS 動畫集，可自由調節動畫參數，生成代碼片段

animista.net/play/

CSS 鼠標懸浮動畫

ianlunn./Hover/

適合做專場動畫的 CSS 動效

https://www./project/magic/

3.教學游戲篇

通過給蘿卜澆水，學習 CSS 網格布局

cssgridgarden.com/

CSS 塔防游戲，學習 flex 布局

www.flexboxdefense.com/

通過做飯，練習 CSS 選擇器

flukeout./

送小青蛙回家，學習 flex 布局

flexboxfroggy.com/

4.代碼生成篇

磨砂透明效果

glassgenerator.netlify.app/

酷酷的背景圖

coolbackgrounds.io/

自定義像素素材

www.pixelartcss.com/

布條背景圖生成器

stripesgenerator.com/

波紋生成器

svgwave.in/

純 CSS 實現百葉窗

accordionslider.com/

網格布局生成器

grid.layoutit.com/

純 CSS 實現的一套頁面元素、組件集

csslayout.io/

CSS 動畫生成器

keyframes.app/animate/

又一個 CSS 動畫生成器

cssanimate.com/

CSS 濾鏡

www.cssfiltergenerator.com/

CSS 輪播生成器，依賴 jQuery

imageslidermaker.com/

30 秒代碼片段 — CSS 篇

www.30secondsofcode.org/css/p/1

5.色彩搭配篇

colorhunt.co/ Color Hunt

mycolor.space/ 還是配色

clrs.cc/ 還是配色

cssgradient.io/ CSS 漸變色