最近在Codepen上看到了@Adir写的随机翻牌和找蛋蛋（可以想象是砸金蛋）效果，让我再次刷新了对CSS的认知。看到这两个效果之后我才知道，在CSS中除了可以实现 动态计算 ， 逻辑运算 和 状态切换 之外，也可以使用纯CSS实现随机效果。你是否和我一样，听到纯CSS实现随机效果有点不可思议，但这是事实，在CSS中，我们可以借助CSS动画的能力来模拟部分随机效果。如果你也想了解CSS如何实现随机效果的话，那阅读这篇文章你将知道其中的原委。

来自其他语言的随机性

众所周知，CSS是一种声明式的标记语言。在很多同学的认知中，它是静态的，即 在CSS中一旦设置了一个值（给CSS属性设置了值），就不能改变。更不能像其他编程语言，做一些复杂的事情，比如逻辑运算、动态计算、状态切换，甚至是更复杂的事情，比如随机效果。

注意，随着CSS的自定义属性和calc()函数的出现，虽然我们可以借助这些特性模拟动态计算、逻辑运算、状态切换等，但这些和其他编程语言的同类特性相比还是有很大的局限性或者说缺陷。

大家都知道，像生成随机数（在运行时生成随机数）是JavaScript这样程序语言领域的知识，即，使用Math.random()可以随机生成数字：

抛开程序语言不说，在一些CSS的处理器，比如Sass，他也提供了一个random()函数，可以实现一些随机效果。比如：

// SCSS
.element {
    width: random(80) + vw;
    height: random(50) + vmin;
}

第一次编译出来的结果是：

/* CSS */
.element {
    width: 30vw;
    height: 41vmin;
}

第二次编译出来的结果可能就是：

/* CSS */
.element {
    width: 38vw;
    height: 23vmin;
}

也正因如此，在使用Sass（或SCSS）编码时，有的时候会借助该特性（random()随机函数）实现一些随机效果，比如下面这个随机的渐变效果：

如果使用Sassmeister这样的Sass Playground可以看到每次编译后的结果：

从上面的录屏结果不难发现，使用Sass这样的CSS处理器生成随机值，但一旦CSS代码被编译或导出，这些值就会被固定，它的随机性也就被丢失了。其中的原委@Jake Albaugh做过相应的解释：

random in sass is lik