练习css技能的小游戏

已于 2022-05-11 22:22:22 修改
阅读量703 收藏 1
点赞数
分类专栏： 其他 文章标签： css
于 2022-05-11 22:21:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiyihan/article/details/124720601
版权

游戏地址：

  1. Flexbox froggy

https://flexboxfroggy.com/

  1. Flexbox defense

http://www.flexboxdefense.com/

  1. Knights of the Flexbox Table

地址：https://knightsoftheflexboxtable.com/

  1. Flex Box adventure

地址：https://codingfantasy.com/games/flexboxadventure/play

  1. Flexbox zombies

地址：https://mastery.games/flexboxzombies/

  1. Grid garden

地址：https://cssgridgarden.com/

  1. Grid attack

地址：https://codingfantasy.com/games/css-grid-attack/play

  1. CSS Diner

地址：https://flukeout.github.io/

  1. Guess CSS

地址：https://www.guess-css.app/

  1. CSS Speedrun

地址：https://css-speedrun.netlify.app/​

KryHan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
通关这8个游戏，保证你能精通CSS
前端路上有你有我！
05-10 4608
在知乎上随便一艘，CSS难学，就会找到很多关于CSS为什么这么难学的提问？各种回答都有，但是我觉得在游戏中学习CSS是最好的，毕竟人的天性就是爱玩。以以 Flexbox 布局为例。弹性容器的属性justify-content可以有12 个不同的值，我们要怎么记住呢？在Flexbox Froggy这款游戏就可以很快学会并记住。 下面出现的8个游戏，请一定要好好利用，通过这8个游戏，你一定能精通CSS。 1. Flexbox Defense 我只是提到了这个游戏。它涵盖了 flex 属性align-items
小练习css
03-11
简单的一个小例子希望大家能够参考，不需要积分，免费下载
canvas+CSS打地鼠小游戏
11-06
canvas+CSS打地鼠小游戏
coding的第一步开始
weixin_40232977的博客
03-26 180
在平时coding的时候，自己很多时候写业务，都从顶层开始，这样虽然会发现写的简单，而且效率很高。但是当同一业务或者类似业务再次实现时，往往会发现又得重头开始，或者加if进行分支，或者在部分方法上打个补丁等。这样后期既不易维护，而且看起来还有点乱。 目前，开始从底层开始write，将多个实现业务点分割开来，然后再在总的一条线上进行“拼凑”。这样可以在之后新的业务或...
论文解读：Critical Security Issues in Cloud Computing: A Survey (2018)
木易杨的博客
10-08 803
参考论文：[1]X. Sun, "Critical Security Issues in Cloud Computing: A Survey," 2018 IEEE 4th International Conference on Big Data Security on Cloud (BigDataSecurity), IEEE International Conference on High Performance and Smart Computing, (HPSC) and IEEE Internat
程序员游戏
王兆镇的博客
12-08 468
1、学css select the plates Flexbox Defense Flexbox Froggy Grid Garden 2、学黑客的 hacknet uplink hackTheGame hacker Evolution3、汇编代码 shenzhen io 4、学js codingame screeps checkio 5、算法 lcode竞赛 codewars 6、学习java codecymcodingame 多种语言选择 codecombat 多种语言7、学习 git learn gi
对于html和css初学者，你有什么值得推荐的简单的网页适合练习？
SiKi学院的博客
09-07 265
html和css方面个人认为主要是在于css的学习，变化最多的也在于css，下面主要是介绍一些css相关的练习网站及一些项目，希望对你有帮助~
CSS选择器练习 -- 餐厅小游戏
LIAO_sir的博客
10-19 1816
CSS选择器练习 -- 餐厅小游戏。
CSS小游戏-----餐厅练习
ChaseAug的博客
09-14 985
练习 1、plate 2、bento 3、#fancy 4、plate apple 或 plateapple 5、#fancy pickle 或 #fancypickle 6、.small 7、orange.small 8、bento orange 或 bentoorange 9、plate,bento 10、* 11、plate * 或 plate* 12、plate+apple 13、bento~pickle 14、plateapple 15、orange:first-child 16、plate:on
4个练习css的小游戏网站
Andy
03-16 4042
4个css的小游戏网站
CSS相关的学习网站、JavaScript相关的学习网站、其它学习网站【转 技术胖学程序】
Xpy 的博客
12-29 434
一、CSS学习网站 1. Flex Box 冒险游戏 网址：Flex Box 冒险游戏 https://codingfantasy.com/games/flexboxadventure 简介：这是一个通过使用 flex box 相关知识来完成闯关的冒险游戏，一共24个关卡，更生动地带你体验 Flex 的真实应用场景 2. Flexbox 格子骑士 网址：Flexbox 格子骑士 https://knightsoftheflexboxtable.com/ 简介：这个游戏能帮助你学习不同层面的Fle
CSS3小游戏.zip
07-02
CSS3小游戏.zip
html+css+js狗头小游戏
02-06
html+css+js狗头小游戏 每次游戏图案随机生成 当你点击其中一个狗狗图案的方块时，你所点击的方块及其四周的方块都会发生翻转，当所有的狗狗图案都相同时，游戏胜利！
纯CSS3绘制砖块堆栈小游戏代码
06-24
纯CSS3绘制砖块堆栈小游戏代码是一款简单的CSS3游戏特效，砖块一层层叠加游戏源码。
人类视觉系统_对人类视觉系统的对抗攻击
weixin_26752765的博客
09-04 413
人类视觉系统Neural Networks are exceptionally good at recognizing objects shown in an image and in many cases, they have shown superhuman levels of accuracy(E.g.-Traffic sign recognition). 神经网络非常擅长识别图像中显示的物...
CSS实现一个雨滴滑落效果
云加速
05-28 1252
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css :hover的使用
最新发布
qq_44792224的博客
05-31 167
即鼠标移入类名为btn的元素时，她的子元素i样式发生改变 自身的样式也发生改变 ，如果他有更多的子元素也可以这样写。
CSS 空间转换 动画
qq_67140973的博客
05-31 265
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
css让padding、border不占据宽度
于忠会的博客
05-29 441
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
CSS Speedrun小游戏
02-19
CSS Speedrun是一个基于CSS（层叠样式表）的小游戏，旨在帮助玩家提高对CSS的理解和熟练度。在游戏中，玩家需要根据给定的任务要求，尽快地编写出相应的CSS代码来实现特定的效果。 游戏的难度逐渐增加，从简单的样式设置开始，逐渐涉及到布局、动画、响应式设计等更复杂的CSS技巧。玩家需要在规定的时间内完成任务，并尽量减少代码的行数和复杂度。 通过参与CSS Speedrun，玩家可以锻炼自己的CSS编码能力，学习到一些实用的CSS技巧和最佳实践。同时，游戏还提供了排行榜功能，可以与其他玩家进行比较，争夺最快完成任务的称号。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KryHan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值