在游戏中学CSS

在知乎上随便一艘，CSS难学，就会找到很多关于CSS为什么这么难学的提问？各种回答都有，但是我觉得在游戏中学习CSS是最好的，毕竟人的天性就是爱玩。以以 Flexbox 布局为例。弹性容器的属性justify-content可以有12 个不同的值，我们要怎么记住呢？在Flexbox Froggy这款游戏就可以很快学会并记住。

下面出现的8个游戏，请一定要好好利用，通过这8个游戏，你一定能精通CSS。

1. Flexbox Defense

我只是提到了这个游戏。它涵盖了 flex 属性align-items、justify-content、flex-direction、align-self和order12 个不同的级别。尤其是最后 4 个关卡真的很有趣而且有点棘手。

• 游戏：http ://www.flexboxdefense.com
• 贡献：https ://github.com/channingallen/tower-defense
• 创作者：钱宁艾伦

2. Flexbox Froggy

这个游戏也是关于Flexbox 的，它涵盖了更多的 flex 属性：align-items, justify-content, align-content, flex-direction, align-self, flex-wrap,flex-flow和order24 个不同的级别。如果您解决了最后一个级别，请发表评论😅。

• 游戏：https ://flexboxfroggy.com
• 贡献：https ://github.com/thomaspark/flexboxfroggy
• 创建者：Codepip

3. Grid Garden

在 28 个不同的级别中，您可以学习CSS 网格布局。它涵盖以下网格属性：grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns,grid-template-rows和grid-template.

• 游戏：https ://cssgridgarden.com
• 贡献：https ://github.com/thomaspark/gridgarden
• 创建者：Codepip

4. CSS Diner

这是一个关于各种CSS 选择器的小游戏。尝试掌握所有 32 个级别，称自己为 CSS 选择器专家 - 并且饥肠辘辘 😋。

• 游戏： http: //flukeout.github.io
• 贡献：https ://github.com/flukeout/css-diner
• 创作者：卢克·帕科尔斯基

5.Unfold

这不完全是一个游戏，而是一个关于CSS 3D 变换的交互式演示。你可能认为这很无聊，但相信我：动画是🔥而且你不会认为这对于纯 CSS 是可能的。

• 游戏：https ://rupl.github.io/unfold
• 贡献：https ://github.com/rupl/unfold
• 创作者：克里斯·鲁佩尔

6. Roadmap

解决这个只用 CSS 和 HTML 制作的小游戏需要技巧和速度。它不是直接教 CSS，而是查看源代码教了很多关于clip-path,transform和animationwith @keyframes!
发表评论你需要多少次尝试才能获胜 - 我需要 8 次！😅

• 游戏：http: //victordarras.fr/cssgame
• 创作者：维克多·达拉斯

7. 嘉年华

您只有 8 秒的时间击中所有目标！一个不错的 CSS 小游戏，使用复选框和 CSS 动画。

• 游戏：https ://codepen.io/una/pen/NxZaNr
• 创作者：Una Kravets

8.井字游戏

最后是经典。Tic-Tac-Toe 作为纯 CSS 游戏，具有 2 个难度级别，还使用复选框和 CSS 动画。

• 游戏：https ://codepen.io/alvaromontoro/pen/BexWOw
• 创作者：阿尔瓦罗·蒙托罗