给大家推荐几个练习CSS布局的小游戏(值得收藏)

作为一个前端开发者,css是我们开发过程中不可或缺的一部分,因此熟练掌握css的各种布局是至关重要的。但是学习总是枯燥的。而本篇文章则给大家推荐几个在游戏中学习css的网站,让学习css变得不再乏味。

塔防CSS(学习flex布局)

网站地址: www.flexboxdefense.com/

这个游戏规则很简单,通过flex布局移动炮台位置,然后开始游戏,炮台会让来袭敌军消灭,炮台是有攻击距离的,所以需要将其移动到距离轨道附近的敌方才能攻击。比如第一关

第一关很简单,我们只需要使用justify-content:center将两个炮台都移动到中间位置就行了

只需将炮台移动到箭头所指位置即可

送青蛙回家(练习flex布局)

网站地址: https://flexboxfroggy.com/

游戏规则很简单,通过flex布局将青蛙送到荷叶即可

感兴趣大家可以自己去试试

做法练习CSS选择器

网站地址: https://flukeout.github.io/

根据右边描述的游戏规则,将选择正在晃动的元素输入到css编辑器中即可,比如第一关让我们填写晃动的元素

直接输入plate点击enter即可过关

还有让我们写id的等等

给萝卜浇水(练习网格布局grid)

网站地址: https://cssgridgarden.com/

规则也很简单,通过网格布局将水覆盖到萝卜上即可,比如第一关

我们直接使用grid-column-start: 3;即可将水”浇”到萝卜上

本期的分享就到这里,如果觉得这些网站对你有用的话,不妨点个赞和关注吧!