Lemmings CSS Animation

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.

使用下方的按钮或 walker.add() 添加行走者。拖动一个即可携带，快速甩动即可将其抛出。调整窗口大小时，行走者会随其所处的表面移动，因此快速调整窗口大小会将它们弹射出去。

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

当窗口变窄时，这些元素会换行，从而推动站在上面的任何人。

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

边框是实体的。你可以沿着顶部边缘行走，或者被困在里面。

Buttons and form fields are solid too.

按钮和表单域也是实体的。

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

文本是一个你可以降落但可以穿过的地面。

Throw a walker up here.

把一个行走者扔到这里。

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.

在页面底部附近有一条长长的地面，用来接住所有掉落到底部的物体。