有什么方法可以只使用CSS生成给定范围内的随机数吗？

Question

例如：

div {
   margin-left: random(-100, 100);
}

Answer 1

不要认为 CSS 有这种能力，但 LESS 会有所帮助

http://csspre.com/random-numbers/

Answer 2

目前无法在纯 CSS 中执行此操作，但是如果您使用的是 CSS 预处理器，例如 LESS，那么您可以执行以下：

@randomMargin: `Math.round(Math.random() * 100)`;

div {
  margin-left: ~'@{randomMargin}px';
}

之所以有效，是因为 LESS will evaluate JavaScript expressions。

如果你想把它分成随机的mixin/function，你可以使用：

.random(@min, @max) {
  @random: `Math.round(Math.random() * (@{max} - @{min}) + @{min})`;
}

div {
  .random(-100, 100);
  margin-left: ~'@{random}px';
}

每次都会使用不同的 margin-left 值进行编译：

div {
  margin-left: 18px;
}

但是，我不确定这在生产环境中有多实用，因为您的 CSS 应该已经 compiled/minified 而不是编译在飞。因此，您应该直接使用 JavaScript 来实现这一点。

有什么方法可以只使用CSS生成给定范围内的随机数吗？

Is there any way to generate a random number within a given range using only CSS?

css

random

numbers