小游戏|十一款游戏教你学会 CSS！( 二 )
文章图片
文章图片
这不完全是一款游戏 ， 更像是一个有关CSS 3D变换的交互式演示 。你可能会觉得无聊 ， 但请相信我 ， 游戏里面的动画非常燃 ， 而且你肯定会觉得纯CSS不可能做出这样的效果 。
游戏地址：https://rupl.github.io/unfold
代码库：https://github.com/rupl/unfold
作者：Chris Ruppel
Roadmap
文章图片
文章图片
游戏地址：http://victordarras.fr/cssgame
作者：Victor Darras
Carnival
文章图片
文章图片
你需要在8秒内击中所有目标！这是一款很不错的CSS小游戏 ， 使用了复选框和CSS动画 。
游戏地址：https://codepen.io/una/pen/NxZaNr
作者：Una Kravets
Tic-Tac-Toe （井字棋游戏）
文章图片
文章图片
这是一款经典的小游戏 。这款纯CSS的井字棋游戏只有2关 ， 也使用了复选框和CSS动画 。
游戏地址：https://codepen.io/alvaromontoro/pen/BexWOw
作者：Alvaro Montoro
Flexbox Zombies
文章图片
文章图片
这款游戏带有故事情节 ， 你可以从中学习如何使用Flexbox和弩来打僵尸 。这款游戏需要注册 。
游戏地址：https://mastery.games/p/flexbox-zombies
价格：179美元
作者：Dave Geddes
Service Workies
文章图片
文章图片
在这款冒险游戏中 ， 你可以学习如何避免PWA的陷阱 。你可以提高自己的技术力 ， 并与游戏中的角色一起成长 。也许你可以试着杀死在可怜的村子里肆虐了几个世纪的凶猛野兽！这款游戏需要注册 。
游戏地址：https://serviceworkies.com
价格：179美元
作者：Dave Geddes
Grid Critters
文章图片
文章图片
在这款游戏中 ， 你掌握CSS Grid的旅程始于这位神秘的Grid勇士 。你的任务是使用强大的Grid工具来拯救外星生物 ， 使其免于灭绝 。这款游戏需要注册 。
游戏地址：https://gridcritters.com
价格：179美元
作者：Dave Geddes
总结
不论你是初学者还是专家 ， 我都希望你能够在玩游戏的同时又能学习一些有关CSS的知识！另外 ， 你可以在Codepen上找到很多只用HTML和CSS创建的非常很棒的游戏 。
你还知道哪些非常有趣的学习CSS的游戏？请在下方留言 。
原文：https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
【小游戏|十一款游戏教你学会 CSS！】本文为 CSDN 翻译 ， 转载请注明来源出处 。
推荐阅读
![[聚疗医院管理]孩子成长阶段不同的饮食要点！](https://imgcdn.toutiaoyule.com/20200418/20200418090445069602a_t.jpeg)
- 手机游戏|王者荣耀：来自网络的一组趣图，看到铠皇，耀流下了不争气的眼泪
- 网络游戏|DNF：5件套件件封神，合在一起却变成了菜鸡？歧路套有多神奇
- 射击游戏|十款，好玩的经典大型单机游戏
- 网络游戏|怀旧服73岁老大爷冲上R13军衔，我仿佛看到了40年后的自己
- 游戏攻略|阴阳师：协同对弈攻略，选好式神是首位，搭好阵容是重位
- 网络游戏|DNF：10月份大量玩家脱坑，是因为打压工作室的后果？
- 锐龙|AMD锐龙5000系列发布，性能大提升，游戏超10900K
- 网络游戏|原神：玩家30级之后，第一件事就是为难策划了，两个问题很严重
- 玩家|我的世界：别惹管理员！否则清除重生点加镜头抖动，游戏都没法玩
- 游戏|Epic喜加二：《智慧之海》《风起云涌2：越南》限时免费领取