玩游戏学 CSS！

• https://www.w3.org/TR/?title=css/^[1]
• https://www.w3.org/TR/css-syntax-3/^[2]

之前也听过一些后端同学吐糟 CSS 比较难学，就算学会了，长时间不用也会遗忘。

其实，我们不妨利用玩游戏来加深对枯燥概念的学习和理解，对于日常开发会使用到的基本操作刻意练习，养成肌肉记忆。边玩边学，它不香吗？

1.Flexbox Froggy

• 传送门^[3]

Flexbox 青蛙，一共 24 个关卡，每一关都有语法提示，鼠标 hover 到语法属性上，会显示其所有的属性值。

通过 Flex 语法编程，移动青蛙到目标荷叶，帮助你加深记忆。

呱～

2.Flexbox Defense

• 传送门^[4]

Flexbox 塔防，一共 12 个关卡的塔防游戏，通过 Flex 语法摆放防御塔，阻挡敌方小兵通过。

(敌军还有 30 秒到达战场，碾碎他们！)

3.CSS Diner

• 传送门^[5]

CSS 晚餐，一共 32 个关卡，由简入难，通过 CSS 选择器语法选择跳动的盘子来进行通关，帮你熟悉和记忆选择器相关的语法。

“

食堂店小二儿：捡盘子这事儿我熟练！

”

4.Grid Garden

• 传送门^[6]

Grid 花园，共 28 关，通过 Grid 语法编程，种植，浇灌你自己的胡萝卜园，帮你熟悉和记忆 Grid 语法。

5.Flexbox Zombies

• 传送门^[7]

Flexbox 僵尸，共 12 章节，每一章中都有难度递增的挑战回合。

自带剧情，炫酷的动画和音效，用 Flex 语法打僵尸，强烈推荐体验！！！

6.Grid Critters

• 传送门^[8]

网格小动物，数百个关卡，需要付费。

你的旅程从神秘的 Grideros 星球开始，你的任务是使用你船上强大的网格工具来拯救外星生物免于灭绝。

作者是一名拥有十多年前端经验的 UI 架构师，为了帮助人们可以轻松愉快的精通 CSS Grid 布局，他选择全职并投入了大量的精力开发了这款游戏。

学习这件事本身就是反人性的，但如果边学边玩的话，你是否愿意为了你的热爱，多一点点坚持呢？

你如果还知道一些好玩的学习 CSS 的游戏，那么就在评论区和大家分享吧～

你可能会感兴趣：

CSS 布局的本质是什么

8则未必知道且超级实用的纯CSS布局排版技巧 | 网易4年实践

「进击的前端工程师」CSS色彩揭秘

参考资料