前言
本文将介绍全网最全的 8 款CSS游戏，让你在游戏中学习，这里收录了有关 flex布局、gird布局、选择器、绘图、动画、像素尺寸的游戏。赶紧收藏起来吧！
分别是：
- CSS Flexbox
- CSS Grid Layout
- CSS Selectors Cheatsheet
- CSS Animations
- CSS Ruler
- CSS Filters
- CSSBattle
- CSS Diner
学习 Flexbox 的工具
FLEX BOX ADVENTURE
Flex Box Adventure 是一款互动冒险游戏，您可以使用您的 flexbox 技能来协助游戏角色解决 24 个挑战。
（图片来源：Flex Box Adventure）
KNIGHTS OF THE FLEXBOX TABLE
Knights of the Flexbox Table是另一个精心设计的交互式课程，可帮助您了解 flexbox 规范的不同方面。这个包括 18 个地牢游戏来教你 flexbox。您不是在编写纯 CSS，而是在使用 Tailwind CSS 类，意味着您将学习 flexbox 以及 Tailwind 的语法。
（图片来源：KNIGHTS OF THE FLEXBOX TABLE ）
FLEXBOX FROGGY
Flexbox Froggy 是一个比较老的游戏，并且仍然是学习 flexbox 语法的流行的游戏之一。使用 flexbox 的API根据需要排列青蛙通关。
（图片来源：Flexbox Froggy）
FLEXBOX ZOMBIES
Flexbox Zombies也是学习 flexbox 语法的游戏。每关都会有一个与僵尸相关的情节，同时为您提供 flexbox 的相关知识，以帮助您学习使用新的 flexbox 技巧。
（图片来源：Flexbox Zombies）
FLEXBOX DEFENSE
Flexbox Defense是一款基于塔防策略游戏类型的游戏，他总共12个关卡，在这些挑战中您必须使用 flexbox 语法来阻止来袭的敌人。
（图片来源：Flexbox Defense）
FLEXY BOXES
如果您要 flexbox 一个相对复杂的布局，使用 Flexy Boxes 模拟布局是一个不错的选择。这是一个简单的 在线flexbox 低代码工具，它也为您生成 flexbox 代码。它还提供了兼容浏览器前缀
（图片来源：Flexy Boxes）
学习 CSS 网格布局（Grid）的工具
GRID GARDEN
Grid Garden, 与 Flexbox Froggy 是同一个制作者，包括 28 个不同的关卡来教你 CSS 网格布局的不同部分。如果您对这些人的更多内容感兴趣，他们的 Pro 计划包括许多其他 CSS 和 JS 互动游戏。
（图片来源：格子花园）
CSS GRID CHEAT SHEET
[CSS Grid Cheat Sheet]是了解 CSS Grid 的可视化交互式指南。在网格中选择一个框，然后使用左侧栏中的选项和设置来调整网格布局的不同部分。
（图片来源：CSS Grid Cheat Sheet）
GRID ATTACK
Grid Attack与前面提到的 Flexbox Adventure 出自同一创作者。这个不是免费的，但包含 80 个网格布局问题的交互式挑战。
（图片来源：网格攻击）
GRID CRITTERS
Grid Critters 是一个基于互动挑战的平台。该课程包括 10 章，每章分为不同级别的关卡，有的多达 20-26 关。
（图片来源：Grid Critters）
更多 CSS 技能的工具
CSS SELECTORS CHEATSHEET
CSS Selectors Cheatsheet 是一个交互式练习，用于测试您对 CSS 选择器的理解。前几个相当简单，但随着您进入更高级的选择器（如较少使用的伪类），练习的难度会增加。
（图片来源：CSS 选择器备忘单）
CSS ANIMATIONS
CSS Animations是一个帮助你提高 web 制作动画的技能、且功能齐全的平台。这个由 32 部分组成的课程有许多预制图形，在课程中用作动画的基础。
（图片来源：CSS Animations）
CSS RULER
CSS Ruler 为您提供了三类 CSS 单位的可视化表示，您可以尝试使用它们：字体相对像素（例如 rem、ch）、视口百分比（例如 vh、vw）和绝对像素（例如 px、in）。
（图片来源：CSS 标尺）
FILTER BLEND
Filter Blend可让您随意使用 CSS 的 mix-blend-mode 、 background-blend-mode 和 filter 属性的不同值。您可以在图层中添加一个或多个自己的图像以及背景颜色，然后调整设置以查看不同值的行为方式。
（图片来源：滤镜混合）
CSSBATTLE
这个可以让你进行交互式挑战，系统给定一张图片，要求你使用纯 CSS 并以最少的代码绘制。通过这些练习，您肯定会学到很多关于 HTML 和 CSS 的知识，但这些技术在现实世界中通常用处不大。
（图片来源：CSSBattle）
CSS DINER
CSS Diner 非常适合 CSS 初学者或不熟悉 CSS 选择器的人。这个游戏允许您使用有用的 HTML 查看器在食品上使用真正的 CSS 选择器，这样您就可以看到图形和代码之间的关系。
（图片来源：CSS DINER） 全文完
谢谢！
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天
