学习CSS让你感到枯燥无味?本期梦梦给你带来8个边玩边学习CSS的神级网站!通过有趣好玩的游戏来帮助你提高学习兴趣以及解决问题的能力。
本期推荐的网站基本上是英文的,如果需要中文,则使用Chrome或者MS Edge浏览器打开,在页面点击鼠标右键即可翻译成中文哦~
![](https://i-blog.csdnimg.cn/blog_migrate/e97f9d12aba4cdfad225d96a0873a444.png)
话不多说,一起来看看吧~
NO.01
CSS挑战-释放你的CSS技能!游戏分为五个等级,看看你在哪个等级吧~
![](https://i-blog.csdnimg.cn/blog_migrate/df48b0e3473e936b0ff4d6bc5b9014c4.png)
NO.02
在这里您可以编写CSS代码来种植胡萝卜花园!一共28个关卡,看看你能不能全部通关吧!
![](https://i-blog.csdnimg.cn/blog_migrate/ad9da64d416858f29e70fd6a2d28fe35.png)
NO.03
https://ilyashubin.github.io/FilterBlend/
CSS样式混合模式和滤镜游乐园,激发你的CSS创意!
![](https://i-blog.csdnimg.cn/blog_migrate/adcd163b416d45d5ee23691ecdb86503.png)
NO.04
动画课程的CSS浏览器!通过玩游戏的同时,学习CSS中对象动画的基础知识。
![](https://i-blog.csdnimg.cn/blog_migrate/ef0403e31ac487c0dbe020877e4b37f6.png)
NO.05
CSS高尔夫游戏来了!使用 CSS 技能使用尽可能少的代码复制目标。随意查看下面的目标并测试您的 CSS 技能。
![](https://i-blog.csdnimg.cn/blog_migrate/aec2d3bb4d6106f51da0b62c44a49007.png)
NO.06
https://www.codingame.com/start
CodinGame游戏提高你的编程能力的同时,享受乐趣。
![](https://i-blog.csdnimg.cn/blog_migrate/8c5cbf0f93454f895ec5a1e7d8d7faa6.png)
NO.07
通过玩游戏的方式,学习CSS编程代码,一共三种难度,每种难度有24个关卡,你敢来挑战?
![](https://i-blog.csdnimg.cn/blog_migrate/8c4fd0d25d0e9b942488f01d23c16bb3.png)
NO.08
https://knightsoftheflexboxtable.com/
这个游戏能帮助你学习不同层面的 Flex Box 规范,一共有18个关卡。
你在该游戏中写CSS类时,不是用原生写的,而是用Tailwind,一举两得,既能学习Flex,又能学习Tailwind。
![](https://i-blog.csdnimg.cn/blog_migrate/57a65b467bfa00f9b9c8d1eb3ff71ab4.png)
本期就到这里,赶紧上手体验吧!