共计 1074 个字符，预计需要花费 3 分钟才能阅读完成。
美味值：🌟🌟🌟🌟🌟
口味：气泡冷面
之前在社区中发现了几款不错的 学习 CSS 的游戏，体验之后发现不错，和大家分享一下。
对于初学者来说，CSS 繁多的语法可能有些干燥，而且重要的是 W3C 中 CSS 相干文档不仅多，而且浏览体验极差。
- https://www.w3.org/TR/?title=css/
- https://www.w3.org/TR/css-syntax-3/
之前也听过一些后端同学吐糟 CSS 比拟难学，就算学会了，长时间不必也会忘记。
其实，咱们无妨利用玩游戏来加深对干燥概念的学习和了解，对于日常开发会应用到的基本操作刻意练习，养成肌肉记忆。边玩边学，它不香吗？
1.Flexbox Froggy
- 传送门
Flexbox 青蛙，一共 24 个关卡，每一关都有语法提醒，鼠标 hover 到语法属性上，会显示其所有的属性值。
通过 Flex 语法编程，挪动青蛙到指标荷叶，帮忙你加深记忆。
呱～
2.Flexbox Defense
- 传送门
Flexbox 塔防，一共 12 个关卡的塔防游戏，通过 Flex 语法摆放进攻塔，阻挡敌方小兵通过。
(敌军还有 30 秒达到战场，碾碎他们！)
3.CSS Diner
- 传送门
CSS 晚餐，一共 32 个关卡，由简入难，通过 CSS 选择器语法抉择跳动的盘子来进行通关，帮你相熟和记忆选择器相干的语法。
食堂店小二儿：捡盘子这事儿我纯熟！
4.Grid Garden
- 传送门
Grid 花园，共 28 关，通过 Grid 语法编程，种植，浇灌你本人的胡萝卜园，帮你相熟和记忆 Grid 语法。
5.Flexbox Zombies
- 传送门
Flexbox 僵尸，共 12 章节，每一章中都有难度递增的挑战回合。
自带剧情，炫酷的动画和音效，用 Flex 语法打僵尸，强烈推荐体验！！！
6.Grid Critters
- 传送门
网格小动物，数百个关卡，须要付费。
你的旅程从神秘的 Grideros 星球开始，你的工作是应用你船上弱小的网格工具来援救外星生物免于灭绝。
作者是一名领有十多年前端教训的 UI 架构师，为了帮忙人们能够轻松愉快的精通 CSS Grid 布局，他抉择全职并投入了大量的精力开发了这款游戏。
学习这件事自身就是反兽性的，但如果边学边玩的话，你是否违心为了你的酷爱，多一点点保持呢？
你如果还晓得一些好玩的学习 CSS 的游戏，那么就在评论区和大家分享吧～
参考链接
https://dev.to/suprabhasupi/learn-css-by-playing-games-1a36
❤️爱心三连击
1. 如果你感觉食堂酒菜还合胃口，就点个赞反对下吧，你的 赞是我最大的能源。
2. 关注公众号前端食堂，吃好每一顿饭！
3. 点赞、评论、转发 === 催更！