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 渐变色