十一款学CSS小游戏,你知道几个


当前第2页 返回上一页

这不完全是一款游戏,更像是一个有关CSS 3D变换的交互式演示。你可能会觉得无聊,但请相信我,游戏里面的动画非常燃,而且你肯定会觉得纯CSS不可能做出这样的效果。

游戏地址:https://rupl.github.io/unfold

Roadmap

640?wx_fmt=jpeg

你需要一定的技巧和速度才能打通关这款游戏,但游戏本身是只用CSS和HTML制作的。它并非直接地讲解了CSS,而且通过研究源代码学习了很多有关clip-path、transform和带有@keyframes的动画知识!请在下方留言,告诉我们你总共尝试了几次才通关,我试了8次!

游戏地址:http://victordarras.fr/cssgame

Carnival

640?wx_fmt=jpeg

你需要在8秒内击中所有目标!这是一款很不错的CSS小游戏,使用了复选框和CSS动画。

游戏地址:https://codepen.io/una/pen/NxZaNr

Tic-Tac-Toe (井字棋游戏)

640?wx_fmt=jpeg

这是一款经典的小游戏。这款纯CSS的井字棋游戏只有2关,也使用了复选框和CSS动画。

游戏地址:https://codepen.io/alvaromontoro/pen/BexWOw

Flexbox Zombies

640?wx_fmt=jpeg

这款游戏带有故事情节,你可以从中学习如何使用Flexbox和弩来打僵尸。这款游戏需要注册。

游戏地址:https://mastery.games/p/flexbox-zombies

价格:179美元

Service Workies

640?wx_fmt=jpeg

在这款冒险游戏中,你可以学习如何避免PWA的陷阱。你可以提高自己的技术力,并与游戏中的角色一起成长。也许你可以试着杀死在可怜的村子里肆虐了几个世纪的凶猛野兽!这款游戏需要注册。

游戏地址:https://serviceworkies.com

价格:179美元

Grid Critters

640?wx_fmt=jpeg

在这款游戏中,你掌握CSS Grid的旅程始于这位神秘的Grid勇士。你的任务是使用强大的Grid工具来拯救外星生物,使其免于灭绝。这款游戏需要注册。

游戏地址:https://gridcritters.com

价格:179美元

学习视频分享:css视频教程

以上就是十一款学CSS小游戏,你知道几个的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

css column-rule-width属性怎么用

css放在html的哪里

css怎么排除第一个子元素

css background-image属性怎么用

css中的url是什么意思

css如何隐藏标签

css a不换行怎么设置

css怎么让图片横着排列

css white-space属性怎么用

css的样式规则是什么样的

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...