CSS 电梯:纯 CSS 实现的状态机与楼层导航

点击 关注 公众号，“ 技术干货 ” 及时达！

作为一个对状态机痴迷的开发者，我常常会被一些文章点燃灵感，比如那篇《用 HTML 复选框和 CSS 打造完整状态机》。

纯 CSS 驱动的状态机展现出的力量让我十分着迷，我不禁开始想：能不能做一个更简单、更互动、而且完全不用宏的版本？于是，这个想法催生了一个项目—— 「我用 CSS 搭建了一个电梯模拟器，带有方向指示器、过渡动画、计数器，甚至还考虑了无障碍功能。」

在这篇文章里，我会带你走一遍完整过程：我如何用现代 CSS 特性——比如自定义属性、计数器、 :has 伪类和 @property ——构建一个完全交互的电梯。它能知道自己在哪一层，要去哪里，以及需要多久才能到达。完全不需要 JavaScript。在线体验： Pure CSS State Machine Elevator

用 CSS 变量定义状态

电梯系统的核心在于 CSS 自定义属性来追踪状态。我用几条 @property 规则来支持类型化值和动画过渡：

@property --current-floor { syntax: " initial-value: 1; inherits: true;}
@property --previous { syntax: " initial-value: 1; inherits: true;}
@property --relative-speed { syntax: " initial-value: 4; inherits: true;}
@property --direction { syntax: " initial-value: 0; inherits: true;}

这些变量能让我比较电梯的当前楼层和上一层，计算移动速度，并驱动相应的动画与过渡。

普通的 CSS 自定义属性（例如 --current-floor ）虽然能在各处传值，但浏览器默认只把它当成字符串：它根本不知道 5 是数字、颜色，还是你猫的名字。既然不知道，就无法做动画。

这时候 @property 就派上用场了。通过 “注册” 变量，我可以明确告诉浏览器这是 或 类型，并设定初始值。这样浏览器就能生成平滑的中间帧。不然，我的电梯只能 “瞬移” 到新楼层——显然，这不是我想要的乘坐体验。

简单 UI：用单选按钮选择楼层

单选按钮就是状态的触发器。每一层对应一个 radio 输入，然后用 :has 检测哪一个被选中：

input type="radio" id="floor1" checked>input type="radio" id="floor2" >input type="radio" id="floor3" >input type="radio" id="floor4" >

.elevator-system:has(#floor1:checked) { --current-floor: 1; --previous: var(--current-floor);}
.elevator-system:has(#floor2:checked) { --current-floor: 2; --previous: var(--current-floor);}

这样一来，电梯系统就成了一个状态机，选择不同按钮会触发过渡和计算。

用动态变量模拟运动

要模拟电梯上升 / 下降，我用 transform: translateY(...) ，结合 --current-floor 来计算：

.elevator { transform: translateY(calc((1 - var(--current-floor)) * var(--floor-height))); transition: transform calc(var(--relative-speed) * 1s);}

动画时长取决于要跨越的楼层数：

--abs: calc(abs(var(--current-floor) - var(--previous)));--relative-speed: calc(1 + var(--abs));

解释一下：

• --abs 得到要移动的楼层数（绝对值）。

• --relative-speed 让动画在跨越更多楼层时更慢。

比如从 1 楼到 4 楼，动画就比从 2 楼到 3 楼耗时更久。这完全依靠 CSS calc 的数学运算完成。

箭头方向的逻辑

电梯的箭头根据楼层变化指向上或下：

--direction: clamp(-1, calc(var(--current-floor) - var(--previous)), 1);
.arrow { scale: calc(var(--direction) * 2); opacity: abs(var(--direction)); transition: all 0.15s ease-in-out;}

• clamp 限制结果在 -1 到 1 之间。

• 1 表示上行， -1 表示下行， 0 表示静止。

• 这个结果被用于缩放箭头，实现翻转和透明度变化。

轻量的数学逻辑 + 视觉效果，完全无须脚本。

用延迟模拟 “记忆”

CSS 原生不记得 “上一状态”。我用延迟更新 --previous 来模拟：

.elevator-system { transition: --previous calc(var(--delay) * 1s); --delay: 1;}

在延迟期间， --previous 落后于 --current-floor ，从而能计算方向与速度。延迟结束后，两者同步。这就像给 CSS 加了一点 “记忆”，替代了 JS 里常见的状态保存。

楼层显示与 Unicode 风格

楼层显示则通过 CSS 计数器来处理：

#floor-display:before { counter-reset: display var(--current-floor); content: counter(display, top-display);}

定义一个自定义计数器样式，使用 Unicode 圆圈数字：

@counter-style top-display { system: cyclic; symbols: "\278A" "\2781" "\2782" "\2783"; suffix: "";}

比如 \278A 到 \2783 就是 、、、，让电梯面板更有设计感。

用 aria-live 提升无障碍体验

虽然 CSS 改不了 DOM 文本，但可以用 ::before + counter 来让屏幕阅读器读出当前楼层：

"sr-only"
aria-live="polite" id="floor-announcer">