1.基礎(chǔ)學(xué)習(xí)篇

CSS 參考書

cssreference.io/

CSS 靈感

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

UI 設(shè)計師的靈感源泉

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

交互式在線 CSS 速記表

htmlcheatsheet.com/css/

學(xué)習(xí) CSS 布局

zh.learnlayout.com/

CSS 小花招

css-tricks.com/

web.dev 上的 CSS 教學(xué)專欄

web.dev/learn/css/

W3 How To 學(xué)習(xí)如何實(shí)現(xiàn)常見的頁面組件

www.w3schools.com/howto/

450 多個純 CSS 實(shí)現(xiàn)的 UI 設(shè)計

https:///tag/pure-css/

2.CSS 動畫篇

CSS 動畫集

animate.style/

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

tholman.com/obnoxious/

CSS 抖動特效

elrumordelaluz./csshake/

CSS 三維變換動畫

animxyz.com/

CSS 動畫集,，可自由調(diào)節(jié)動畫參數(shù)，生成代碼片段

animista.net/play/

CSS 鼠標(biāo)懸浮動畫

ianlunn./Hover/

適合做專場動畫的 CSS 動效

https://www./project/magic/

3.教學(xué)游戲篇

通過給蘿卜澆水,，學(xué)習(xí) CSS 網(wǎng)格布局

cssgridgarden.com/

CSS 塔防游戲,，學(xué)習(xí) flex 布局

www.flexboxdefense.com/

通過做飯，練習(xí) CSS 選擇器

flukeout./

送小青蛙回家,，學(xué)習(xí) flex 布局

flexboxfroggy.com/

4.代碼生成篇

磨砂透明效果

glassgenerator.netlify.app/

酷酷的背景圖

coolbackgrounds.io/

自定義像素素材

www.pixelartcss.com/

布條背景圖生成器

stripesgenerator.com/

波紋生成器

svgwave.in/

純 CSS 實(shí)現(xiàn)百葉窗

accordionslider.com/

網(wǎng)格布局生成器

grid.layoutit.com/

純 CSS 實(shí)現(xiàn)的一套頁面元素,、組件集

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 漸變色