css 加随机数 引用_在CSS中生成随机数

Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。

Robin Rendle 于2017年1月11日

前几天，我遇到了一个特别有趣的问题。我想用random animation-duration 做一个动画元素。下面是个开始，当然是非随机的。

参见：Random numbers CSS(By Robin Rendle)：http://codepen.io/robinrendle/pen/1acd2c123621a542aa223022d402b6eb

这是我写的CSS动画代码：

看起来，目前一切都很完美！但是，这并不是随机的，动画活动的周期时间是固定的2秒。

我希望将这固定的2秒钟的动画时间变成随机时长。于是我改写成这样：

其中$randomNumber 是程序化随机化的。像Sass等CSS预处理器都提供了一个随机函数(random())

或许，你会认为这已经很完美了。但是，我认为还不够完美。在预处理过程中产生的随机数会显示一个警告。

引用jake albaugh (@jake_albaugh) 的话说，“Sass中的随机数就像是从一个故事中随机的挑选主要人物的名字一样。这些名字只有在作者写作的时候是随机的給人物命名的，之后这些人物名就不会改变”。

也就是说，只要CSS一执行完毕，随机化就自然而然的结束了。随机值也就永远的被锁定了(除非预处理器再度重新运行)。

这也不同于JavaScript中的随机数类型，在JavaScript中，如Math.random()，随机数是在JavaScript运行过程中生成的。

一番唉声叹气之后，我意识到这是使用CSS内置变量(自定义属性)的绝好机会。当然，内置变量自身是不会生成随机数的。不过，我们很快就会见到，它们对我们依旧有很大的帮助。

如果你对这些随机变量还不是很熟悉，也不必担心。实际上，它们是CSS语言本身内置的变量。不过，相比于你可能比较熟悉的Sass或者Less等预处理器中的变量而言，它们肯定有所不同。Chris很快就列出了一堆优点：你可以在没有预处理器(preprocessor)的情况下使用内置变量(native CSS variables)。

多层联动。可以在任何选择器中设置变量以设置或者覆盖其当前值。

当它们的值发生改变时(如媒体查询—media query或者其他的状态)，浏览器会根据需要重新绘制。

你可以在JavaScript中对它们进行访问和操作。

对我们来说，最后那一条才是最重要的。我们将在JavaScript中生成随机数，然后将它通过自定义属性应用到CSS中。

首先在，在CSS中创建一个我们需要的自定义属性变量，并设置默认值：

现在，我们可以这样在CSS中使用我们定义的变量：

非戏剧性的是，看起来我们现在依然处在问题的起点。然而，尽管演示和之前的SVG动画毫无差别，但是这次我们用的是CSS变量。我们可以通过更改CSS中的变量然后对比动画的变化来证明我们所做的一切都是有效的。

接下来，我通过JavaScript访问和操作我们所设置的自定义属性。

此时，我可以看到在SVG中会显示出一个红色的圆。然后我们通过setProperty方法来改变CSS中变量—animation-time的值。

现在好了，这就是在CSS中生成的随机数在SVG动画中得到应用。

参见：Random numbers CSS(By Robin Rendle)：http://codepen.io/robinrendle/pen/397deea9cfff5c5973d0051765ae7bef

毫无疑问，这是一个很好的进步。因为在JavaScript运行过程中生成随机数，所以每次是不同的。这已经相当接近我们的目标了，不过我们要让它再高级一点，就是让变量animation-duration在运行的过程中实现周期性随机化。

借助JavaScript我们可以随时更新我们的自定义属性。下面是一个我们让变量animation-duration每秒实现一次更新的例子：

不错，这就是我想要的结果。

参见：Random numbers CSS(By Robin Rendle)：http://codepen.io/robinrendle/pen/f3d3c2ff0ab6cd4aef12bed7c59386de

需要记住的一点是CSS自定义属性方法的可用性有些牵强，所以一定要注意。当然，我们也可以慢慢改近这个动画方法，比如：

如果不支持CSS变量(自定义属性)，那么就会显示动画，自然这就不是我们想要的结果。

当然，如果CSS变量(自定义属性)方法不是动画时间(animation-duration)随机化的唯一方法，那么我们之前的做法就变得毫无意义。我们可以通过JavaScript调用DOM元素，并将其产生的随机值直接引入style中：

如果有必要，你甚至可以等到动画结束之后再设置新的动画时间。

顺便提示另一个可能的方法，就是用EQCSS来实现：

你希望随机化能够在CSS中就能直接实现吗？我不确定是否有确切的方法，不过即使有这样的方法，可能我们也不得不再等一段时间才可以使用。沿着这些思路，Philip Walton最近写道，在CSS中为随机数写一个真正的填充工具(polyfill)真的很难。 而在JavaScript中实现就容易多了。

英文原文：https://css-tricks.com/random-numbers-css/

译者：Skull_ageles