标签搜索
隐藏侧边栏

通关这8个游戏,CSS还不是手到擒来!

搞前端的半夏
2022-02-24 / 0 评论 / 1 点赞 / 184 阅读 / 1,446 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-02-24,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏公众号

在知乎上随便一艘,CSS难学,就会找到很多关于CSS为什么这么难学的提问?各种回答都有,但是我觉得在游戏中学习CSS是最好的,毕竟人的天性就是爱玩。以以 Flexbox 布局为例。弹性容器的属性justify-content可以有12 个不同的值,我们要怎么记住呢?在Flexbox Froggy这款游戏就可以很快学会并记住。

下面出现的8个游戏,请一定要好好利用,通过这8个游戏,你一定能精通CSS。

Flexbox Defense

它涵盖了 flex 属性align-items、justify-content、flex-direction、align-self和order12 个不同的关卡。尤其是最后 4 个关卡真的很有趣而且有点棘手。

Flexbox Froggy

这个游戏也是关于Flexbox 的,它涵盖了更多的 flex 属性:align-items, justify-content, align-content, flex-direction,align-self, flex-wrap,flex-flow和order24 个不同的关卡。

Grid Garden

在 28 个不同的关卡中,您可以学习CSS 网格布局。它涵盖以下网格属性:grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end,grid-row, grid-area, order, grid-template-columns,grid-template-rows和grid-template.

CSS Diner

这是一个关于各种CSS 选择器的小游戏。通关所32 个关卡,你就可以称自己为 CSS 选择器专家.

Grid Critters

这是一个关于grid layout的游戏,在这个游戏中,你的任务是使用强大的网格工具来拯救外星生物免于灭绝。

Unfold

这不完全是一个游戏,而是一个关于CSS 3D 变换的交互式演示。你可能认为这很无聊,但相信我,一些你认为不可能用CSS实现的动画,这里也有办法实现。

CSSBattle

这是一个照猫画虎游戏,每一个游戏,会给你一个效果,你必须要用最少的CSS的代码,来实现复现给出的效果。

0

评论区