36个 CSS 学习网站，总有一款让你中意
1.基础学习篇
CSS 参考书
cssreference.io/
CSS 灵感
https://chokcoco.github.io/CSS-Inspiration/#/
UI 设计师的灵感源泉
https://www.awwwards.com/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://codemyui.com/tag/pure-css/
2.CSS 动画篇
CSS 动画集
animate.style/
不过脑子的动效，不过看起来很“猛”
tholman.com/obnoxious/
CSS 抖动特效
elrumordelaluz.github.io/csshake/
CSS 三维变换动画
animxyz.com/
CSS 动画集，可自由调节动画参数，生成代码片段
animista.net/play/
CSS 鼠标悬浮动画
ianlunn.github.io/Hover/
适合做专场动画的 CSS 动效
https://www.minimamente.com/project/magic/
3.教学游戏篇
通过给萝卜浇水，学习 CSS 网格布局
cssgridgarden.com/
CSS 塔防游戏，学习 flex 布局
www.flexboxdefense.com/
通过做饭，练习 CSS 选择器
flukeout.github.io/
送小青蛙回家，学习 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 渐变色