Lemmings CSS 动画
Lemmings CSS Animation

原始链接: https://markblah.github.io/lemmings/

Walker 游乐场允许你添加、拖动、搬运和投掷行走者。调整窗口大小会移动表面,并可能把站在上面的行走者弹射出去。游乐场包含楼梯、高楼梯、悬浮平台、坑壁和卡片;缩小窗口时,卡片会换行到新行,把站在上面的行走者推走。卡片边框是实体的,允许在顶边行走,或把行走者困在里面。第三张卡片的文本充当可行走的地板,而第四张卡片可用于把行走者向上投掷。在阅读区域,文本列在调整大小时会重排,每行文本都成为行走者可以落下、掉落或着陆的地板。行距保持很近,以免文本困住行走者;只有边框、盒子、按钮、图像和字段会阻挡它们。靠近底部的长地板会接住所有完全落下的东西。

Hacker News 新帖 | 过往 | 评论 | 提问 | 展示 | 工作 | 提交 登录 Lemmings CSS 动画 ( markblah.github.io ) 13 分 由 MarkBlah 1 小时前 | 隐藏 | 过往 | 收藏 | 2 条评论 帮助 Waterluvian 5 分钟前 | 下一个 [–] 这相当酷。 我最近在网站上做了类似的东西:你可以点击一个六边形,它会变成机器人,开始 SLAM 映射页面,小心地围绕文本元素导航。 你最初是否惊讶于获取单个字符的精确块大小,而不仅仅是整个 DOM 元素,竟然如此容易?那是我认为最困难的部分。 回复 MarkBlah 1 小时前 | 上一个 [–] 向 Psygnosis 致敬,只是好玩 回复 指南 | 常见问题 | 列表 | API | 安全 | 法律 | 申请 YC | 联系 搜索:
相关文章

原文
Walker Playground

Add walkers with the button below or __walker.add(). Drag one to carry it, flick it to throw it. Resize the window and walkers ride the surface they're standing on, so a fast resize launches them.

Stairs

Stairs too tall to climb

Floating platforms

Pit

Walls

Cards

These wrap onto new rows as the window narrows, which shoves anyone standing on them.

Card one

Borders are solid. Walk the top edge or get trapped inside.

Card three

Text is a floor you can land on but walk through.

Card four

Throw a walker up here.

Cage

Reading

Columns of text reflow a lot when the window changes size, so this is a good place to try a resize launch. Each line of text is its own floor. Walkers can drop from line to line, fall off the end of a short line, and land on whatever is below.

Lines sit closer together than a walker is tall, so text never blocks them. Only borders, boxes, buttons, images and fields do. That keeps walkers from getting stuck between two lines of a paragraph.

Near the bottom of the page there is one long floor to catch anything that falls all the way down.

联系我们 contact @ memedata.com