10 款精彩的 CSS 学习游戏

学习 CSS 可能颇具挑战性。没有捷径，你必须亲自动手，深入探索 CSS 的神奇世界。

但是！学习 CSS 这个庞然大物其实有很多有趣的方法。本文将重点介绍十款可以用来学习 CSS 的精彩游戏。

1. 弹性盒青蛙

Flexbox froggy 是我玩过的第一批 CSS 解题游戏之一，我非常喜欢它。
它能让你轻松学习各种 Flexbox 布局的位置，非常有趣。

你使用 CSS flex 将青蛙放置在正确的百合花上。
它有 24 个层级，你可以快速查看结果。

玩 Flexbox froggy

2. Flexbox 防御

另一个超酷的 CSS 学习 Flex 游戏是 Flexbox Defense。在这个游戏中，你需要移动塔楼来保卫道路，防止它们受到攻击。

它有 12 个级别，看到多个答案都是正确的，这很酷。

玩 Flexbox 防御

3. 弹性盒表格骑士

如果你喜欢 Tailwind，这款工具绝对棒极了！
它使用 Tailwind 类来教你灵活运用选项。
在我看来，这真是一个绝妙的组合，而且设置得也很好。

总共有 18 个级别可供您清除。

玩 Flexbox 骑士桌

4. Flex Box 冒险

另一个与 Flexbox Froggy 类似的游戏，但设置有所不同。
它还包含一些其他挑战和提示，或许能让你学到很多东西。

它共有 24 个级别可供您清除。

玩 Flexbox 冒险

5. 弹性框僵尸

这游戏的画质超级棒！
剧情太精彩了，我都惊呆了。

它有12个章节，每个章节最多25个关卡。通常玩这个游戏需要花钱，但好像是永久免费的。

玩 Flexbox 僵尸

6.网格花园

网格花园是学习 CSS 网格布局的一种超级有趣的方式。你必须使用网格布局来确保所有的胡萝卜都能得到浇水。

它有 28 个级别来练习大量 CSS 网格选项！

玩格花园

7.电网攻击

该游戏与 Flexbox adventure 是由同一个创作者制作的，并且像其他游戏一样制作精良！

您必须使用 CSS Grid 来改变土地，这样恶魔就无法生存。

它有 80 个级别，为您提供了许多选项和时间，让您以超级有趣的方式学习 CSS 网格。

玩网格攻击

8.CSS餐厅

这个游戏真的太有意思了！
它能让你学习 CSS 选择器，以及一些现代选择器。

该游戏有 32 个级别和有趣的动画来展示您应该瞄准哪个选择器。

玩 CSS Diner

9. 猜猜 CSS

这个游戏与 CSS Diner 非常相似，但你必须猜出哪个选择器与你看到的结果相匹配。

这是一个非常好的概念，因为您总是可以看到完美的结果。

它也不限于特定的 CSS 部分，而是包含许多不同的部分。

玩猜 CSS

10. CSS 快速通关

在这个游戏中，您必须编写特定的 CSS 选择器来定位突出显示的元素。

然而，你必须尽快完成，这对于那些喜欢在游戏中增加难度的人来说是一个巨大的挑战。

该游戏共有十个级别，但您可以更频繁地玩并提高速度。

玩 CSS Speedrun

奖金

一旦您掌握了这些游戏，您就可以参加一些 CSS 挑战和战斗来展示您所学到的所有知识。

以下是一些很棒的网站：

• CSS 之战
• 100天的CSS
• CSS 挑战

所有这些网站都有一个特定的例子，您必须在大多数情况下以最有效的方式重新创建它。

这些网站周围有一些优秀的社区，解决这些问题会很有趣。

告诉我你最喜欢的 CSS 游戏是什么🙌。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。