CSS中有随机数吗？-css教程-PHP中文网

首页

web前端

css教程

CSS中有随机数吗？

Joseph Gordon-Levitt

Apr 15, 2025 am 09:37 AM

Are There Random Numbers in CSS?

CSS赋予网页动态布局和交互能力，但作为一种静态语言，一旦值被设定，便无法更改。因此，随机性的概念在此并不适用。运行时生成随机数是JavaScript的领域，而非CSS。或者说，并非完全如此？如果加入一点用户交互，我们实际上可以在CSS中生成一定程度的随机性。让我们来看一看！

来自其他语言的随机化

正如Robin Rendle在CSS-Tricks的一篇文章中所解释的那样，可以使用CSS变量来实现某种程度的“动态随机化”。但这些方案并非完全基于CSS，因为它们需要JavaScript来更新CSS变量，使其包含新的随机值。

我们可以使用Sass或Less等预处理器来生成随机值，但是一旦CSS代码被编译和导出，这些值就固定了，随机性也就消失了。正如Jake Albaugh所解释的：

Sass中的random就像随机选择故事中主角的名字一样。只有在编写时才是随机的，它不会改变。

— jake albaugh (@jake_albaugh) 2016年12月29日

为什么我在乎CSS中的随机值？

过去，我开发过一些简单的纯CSS应用程序，例如琐事游戏、Simon游戏和魔术技巧。但我想要做一些更复杂的事情。关于创建这些纯CSS片段的有效性、实用性或可行性的讨论，我将留待以后再进行。

基于一些棋盘游戏可以用有限状态机（FSM）表示的前提，它们可以用HTML和CSS来表示。所以我开始开发一个蛇梯游戏（也称为Chutes and Ladders）。这是一个简单的游戏。目标是通过避开蛇并尝试向上爬梯子，将棋子从起点推进到棋盘的终点。

这个项目似乎可行，但我缺少一样东西：掷骰子！

掷骰子（以及抛硬币）普遍被认为是随机化的。你掷骰子或抛硬币，每次都会得到一个未知的值。

模拟随机掷骰子

我打算叠加带有标签的图层，并使用CSS动画来“旋转”并交换哪个图层位于顶部。就像这样：

模拟这种随机性的代码并不复杂，可以使用动画和不同的动画延迟来实现：

<code>/* 最高的z-index是骰子的面数 */
@keyframes changeOrder {
  from { z-index: 6; }
  to { z-index: 1; }
}

/* 所有标签都使用绝对定位重叠 */
label {
  animation: changeOrder 3s infinite linear;
  background: #ddd;
  cursor: pointer;
  display: block;
  left: 1rem;
  padding: 1rem;
  position: absolute;
  top: 1rem;
  user-select: none;
}

/* 负延迟，以便动画的所有部分都在运动 */
label:nth-of-type(1) { animation-delay: -0.0s; }
label:nth-of-type(2) { animation-delay: -0.5s; }
label:nth-of-type(3) { animation-delay: -1.0s; }
label:nth-of-type(4) { animation-delay: -1.5s; }
label:nth-of-type(5) { animation-delay: -2.0s; }
label:nth-of-type(6) { animation-delay: -2.5s; }</code>

动画速度已放慢，以便于交互（但仍然足够快，可以看出下面解释的障碍）。伪随机性也更清晰了。

但后来我遇到了一个障碍：我得到了随机数，但有时，即使我点击我的“骰子”，它也没有返回任何值。

我尝试增加动画时间，这似乎有所帮助，但我仍然遇到一些意外的值。

这时，我做了大多数开发人员在遇到无法仅通过在线搜索解决的障碍时所做的事情：我以StackOverflow问题的形式向其他开发人员寻求帮助。

幸运的是，总是有资源的Temani Afif提出了一个解释和一个解决方案。

简单来说，问题是浏览器只在鼠标按下时激活的元素与鼠标抬起时激活的元素相同时才会触发click/press事件。

由于旋转动画，鼠标按下时的顶部标签不是鼠标抬起时的顶部标签，除非我足够快或足够慢地让动画循环。这就是为什么增加动画时间会隐藏这些问题的原因。

解决方案是将“static”位置应用于打破堆叠上下文，并使用具有更高z-index的伪元素（如::before或::after）来占据其位置。这样，鼠标抬起时，活动标签将始终位于顶部。

<code>/* 活动标签将是静态的，并移出窗口 */
label:active {
  margin-left: 200%;
  position: static;
}

/* 标签的伪元素占据所有空间，并具有更高的z-index */
label:active::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}</code>

以下是包含解决方案的代码，动画时间更快：

进行此更改后，剩下的唯一事情是创建一个小的界面来绘制一个假的骰子来点击，纯CSS蛇梯游戏就完成了。