前言
css的属性是非常的多，如果全靠大脑来记，相信没有几位能够做到，只能通过反复编写，增加熟练度，知道有哪些属性，然后根据编辑器或者浏览器等工具提示，得心应手的完成样式开发。
比如，flex布局。flex的属性justify-content就有12个以上的不同值，必须阅读flexbox的完整指南，才能了解他们各自的作用，但是文档就有几页内容，看起来非常的枯燥乏味。
我最近偶然发现了一个塔防游戏，需要用css编程，来完成塔防，听起来是不是非常的有趣，下面一起看看。
FlexboxDefense你的任务是阻止来犯的敌人越过你的防线。与其他塔防游戏不同，你必须使用css定位你的塔防！
我们从容器属性开始。一个flexbox有一个主轴和一个横轴。
使用塔组容器上的justify-content属性将塔移动到有效位置。justify-content可以设置以下值：
1、flex-start（默认值）：左对齐2、flex-：右对齐3、center：居中4、space-between：两端对齐，项目之间的间隔都相等。5、space-around：每个item两侧的间隔相等。所以，item之间的间隔比item与边框的间隔大一倍。
尝试使用justify-content:center;。例如，将容器的塔移动到主轴的中心。
FlexboxFroggy这个游戏也是关于flexbox的，它涵盖了更多的flex属性：align-items,justify-content,align-content,flex-direction,align-self,flex-wrap,flex-flow和24个不同级别的order。
第一关：使用justify-content属性将青蛙引导到右侧的岛屿上
GridGarden使用grid-column-start属性只对有胡萝卜的区域浇水。
通过28个关卡，学习cssGrid布局，它包含以下属性:grid-column-start,grid-column-,grid-column,grid-row-start,grid-row-,grid-row,grid-area,order,grid-template-columns,grid-template-rows,grid-template.
CSSDiner这是一个关于各种css选择器的小游戏。通过所有关卡，你就可以成为css选择器专家。
Unfold这个不完全是一个游戏，而是一个关于css3d转换的交互式演示。你可能觉得无聊，但是它的动画确实非常nice，可能你都会认为这不可能是纯粹的css。
Roadmap解决这个小游戏需要技巧和速度，是css和html制作。这并不是直接教你使用css，但是可以通过查看源代码可以学到很多关于剪辑路径、变换和动画的知识
怎么玩？将光标放在白点上开始。避开墙壁逃走！（仅适用于Chrome/Chrome和Firefox）
Carnival这个游戏纯CSS完成，通过checkbox+css动画完成。你有8秒的时间击中尽可能多的目标！
源码部分截图
Tic-Tac-Toe这个游戏相信大家都玩过，我们老家称为：对角棋。谁先3颗棋子连线，为胜利。tic-tac-toe作为纯css游戏，使用复选框和css动画完成开发。
上图，电脑已经赢了，最多平手，想赢估计不肯了，你可以试试。
