前言

俺来分享一些碰到的有意思的CSS快速学习网站吧。

flex学习

青蛙学习flex布局：flexboxfroggy.com/

这是今天刚玩的网站，在上面通过让青蛙跳到正确的荷叶位置进行flex布局的学习。

一共有24关，玩完基本上对flex的几个属性掌握得炉火纯青了。

grid学习

萝卜地grid布局：codepip.com/games/grid-…

通过调整grid的几个属性来经营你的萝卜地。这个也是快速上手系列，非常有意思。顺便说这个网站支持中文版。

box可视化调整

Soft-UI CSS Code：neumorphism.io/#1b4964

还在为盒子的阴影设计烦恼？可以在这试试在线调整，同步生成CSS码。

CSS Design

Enjoy CSS：enjoycss.com/

这是个超万能的CSS设计网站，可视化调整，代码下载。既可以学习CSS组件样式，右可以培养一波设计审美。

同时有多种默认样式可以进行学习仿照：

通过多种形状叠加组合可以得到复杂图形：

CSS 配色

ui渐变配色：uigradients.com/#Magic

在这个网站上你可以找到一些成熟的配色方案，也可以通过修改json文件进行自由配色。

之后找到有意思的网站再做更新吧~