css 加随机数 引用_CSS技巧之CSS中的随机数

最近，我误打误撞的遇到一个有趣的问题。我想要随机的去设置animation-duration的值。 这是一个非随机的例子:

这是我用CSS写的一个动画:@keyframes flicker {

0% {

opacity: 1;

}

100% {

opacity: 0;

}

}

#red {

animation: flicker 2s ease alternate infinite;

}

目前工作良好. 但是这里没有随机化，动画执行时间固定为2s。

我想要的动画是执行时间是2s以内的随机数。我想要的效果是这样的:.element {

animation: flicker $randomNumber alternate infinite;

}

这里的$randomNumber是一个通过特定函数生成的随机数。

CSS预处理器如Sass提供了这样的一个函数:$randomNumber: random(5);

.thing {

animation-duration: $randomNumber + s;

}

这可能是以你想要的，但却不是我想要的，预处理器生成随机数过程中有一个明显的缺陷：Sass中，随机数生成过程就像是从一个故事中选择名字的过程，它仅仅在写完之后随机取出，然后它就不再变化了。

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

换句话说，一旦CSS预处理器执行完毕，随机化的过程就结束了࿰