Question

例如：

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

Answer 1

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

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

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

这可行的原因是因为LESS will evaluate JavaScript expressions。

如果要将其分解为随机mixin /函数，可以使用：

.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 应该已经编译/缩小而不是动态编译。因此，您应该使用直接JavaScript来实现此目的。

Answer 2

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

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

有没有办法只使用CSS在给定范围内生成一个随机数？

2 个答案: