?? 基礎(chǔ)學(xué)習(xí)

cssreference.io/^[1] CSS 參考書

chokcoco.github.io/CSS-Inspira…^[2] CSS 靈感

www.awwwards.com/sites/zero-…^[3] UI 設(shè)計(jì)師的靈感源泉

htmlcheatsheet.com/css/^[4] 交互式在線 CSS 速記表

zh.learnlayout.com/^[5] 學(xué)習(xí) CSS 布局

css-tricks.com/^[6] CSS 小花招

web.dev/learn/css/^[7] web.dev 上的 CSS 教學(xué)專欄

www.w3schools.com/howto/^[8] W3 How To 學(xué)習(xí)如何實(shí)現(xiàn)常見的頁面組件

codemyui.com/tag/pure-cs…^[9] 450 多個(gè)純 CSS 實(shí)現(xiàn)的 UI 設(shè)計(jì) by Ξ ???????????????

?? CSS 動(dòng)畫

純 CSS 動(dòng)畫，這里不包含 JS 動(dòng)畫庫

animate.style/^[10] CSS 動(dòng)畫集

tholman.com/obnoxious/^[11] 不過腦子的動(dòng)效，不過看起來很“猛”

elrumordelaluz.github.io/csshake/^[12] CSS 抖動(dòng)特效

animxyz.com/^[13] CSS 三維變換動(dòng)畫

animista.net/play/^[14] CSS 動(dòng)畫集，可自由調(diào)節(jié)動(dòng)畫參數(shù)，生成代碼片段

ianlunn.github.io/Hover/^[15] CSS 鼠標(biāo)懸浮動(dòng)畫

www.minimamente.com/project/mag…^[16] 適合做專場動(dòng)畫的 CSS 動(dòng)效

??? 教學(xué)游戲

cssgridgarden.com/^[17] 通過給蘿卜澆水，學(xué)習(xí) CSS 網(wǎng)格布局

www.flexboxdefense.com/^[18] CSS 塔防游戲，學(xué)習(xí) flex 布局

flukeout.github.io/^[19] 通過做飯，練習(xí) CSS 選擇器

flexboxfroggy.com/^[20] 送小青蛙回家，學(xué)習(xí) flex 布局

?? 代碼生成

cssboxshadow.com/^[21] 盒子陰影 box-shadow 生成器

glassgenerator.netlify.app/^[22] 磨砂透明效果

coolbackgrounds.io/^[23] 酷酷的背景圖

www.pixelartcss.com/^[24] 自定義像素素材

stripesgenerator.com/^[25] 布條背景圖生成器

svgwave.in/^[26] 波紋生成器

numl.design/theme-gener…^[27] numl design 的主題生成器

color.adobe.com/zh/create/c…^[28] adobe 針對(duì)色盲用戶可訪問性，提供的一個(gè)色彩拾取工具

9elements.github.io/fancy-borde…^[29] 圓角 border-radius 的新玩法

• 根據(jù)上面的圓角，我們可以畫出一滴水珠?? codepen.io/prathkum/pe…^[30]

accordionslider.com/^[31] 純 CSS 實(shí)現(xiàn)百葉窗

grid.layoutit.com/^[32] 網(wǎng)格布局生成器

csslayout.io/^[33] 純 CSS 實(shí)現(xiàn)的一套頁面元素、組件集

keyframes.app/animate/^[34] CSS 動(dòng)畫生成器

cssanimate.com/^[35] 又一個(gè) CSS 動(dòng)畫生成器

www.cssfiltergenerator.com/^[36] CSS 濾鏡

imageslidermaker.com/^[37] CSS 輪播生成器，依賴 jQuery ??

www.30secondsofcode.org/css/p/1^[38] 30 秒代碼片段 — CSS 篇

?? 色彩搭配

colorhunt.co/^[39] Color Hunt

mycolor.space/^[40] 還是配色

clrs.cc/^[41] 還是配色

cssgradient.io/^[42] CSS 漸變色

參考：

• github.com/jobbole/awe…^[43] CSS 資源大全中文版
• github.com/awesome-css…^[44] Awesome CSS
• juejin.cn/post/690371…^[45] 一些CSS特效網(wǎng)站整理