这不完全是一款游戏,更像是一个有关CSS 3D变换的交互式演示。你可能会觉得无聊,但请相信我,游戏里面的动画非常燃,而且你肯定会觉得纯CSS不可能做出这样的效果。
游戏地址:https://rupl.github.io/unfold
Roadmap
你需要一定的技巧和速度才能打通关这款游戏,但游戏本身是只用CSS和HTML制作的。它并非直接地讲解了CSS,而且通过研究源代码学习了很多有关clip-path、transform和带有@keyframes的动画知识!请在下方留言,告诉我们你总共尝试了几次才通关,我试了8次!
游戏地址:http://victordarras.fr/cssgame
Carnival
你需要在8秒内击中所有目标!这是一款很不错的CSS小游戏,使用了复选框和CSS动画。
游戏地址:https://codepen.io/una/pen/NxZaNr
Tic-Tac-Toe (井字棋游戏)
这是一款经典的小游戏。这款纯CSS的井字棋游戏只有2关,也使用了复选框和CSS动画。
游戏地址:https://codepen.io/alvaromontoro/pen/BexWOw
Flexbox Zombies
这款游戏带有故事情节,你可以从中学习如何使用Flexbox和弩来打僵尸。这款游戏需要注册。
游戏地址:https://mastery.games/p/flexbox-zombies
价格:179美元
Service Workies
在这款冒险游戏中,你可以学习如何避免PWA的陷阱。你可以提高自己的技术力,并与游戏中的角色一起成长。也许你可以试着杀死在可怜的村子里肆虐了几个世纪的凶猛野兽!这款游戏需要注册。
游戏地址:https://serviceworkies.com
价格:179美元
Grid Critters
在这款游戏中,你掌握CSS Grid的旅程始于这位神秘的Grid勇士。你的任务是使用强大的Grid工具来拯救外星生物,使其免于灭绝。这款游戏需要注册。
游戏地址:https://gridcritters.com
价格:179美元
学习视频分享:css视频教程
以上就是十一款学CSS小游戏,你知道几个的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者