例如,类似:
div {
margin-left: random(-100, 100);
}
目前无法在纯 CSS 中执行此操作,但是如果您使用 CSS 预处理器,例如 LESS,那么您可以执行以下操作:
@randomMargin: `Math.round(Math.random() * 100)`;
div {
margin-left: ~'@{randomMargin}px';
}
这样做的原因是因为 LESS 将计算 JavaScript 表达式。
如果你想将其分解为随机混合/函数,你可以使用:
.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 来实现此目的。
您可以使用 JavaScript 将随机数设置为 CSS 属性:
let el = document.getElementById('foo');
el.style.setProperty('--rand', Math.random());
然后您可以在 CSS 中使用该随机数,例如随机颜色:
#foo {
--rand: 0.5; /* will be a random number from 0 to 1 set by javascript */
--hue: calc(255 * var(--rand));
background-color: hsl(var(--hue), 67%, 57%);
}
或者随机的绿色阴影:
#foo {
--rand: 0.5; /* will be a random number from 0 to 1 set by javascript */
--greenHue: calc(70 + (30 * var(--rand)));
--greenSaturation: calc(50% + (30% * var(--rand)));
--greenLevel: calc(25% + (5% * var(--rand)));
background-color: hsl(var(--greenHue), var(--greenSaturation), var(--greenLevel));greenLevel));
}
要获得更多变化,请设置多个随机数变量。还要记住变量是继承的。它们可以用于关键帧动画/等。
不认为 CSS 有这种能力,但 LESS 会有帮助
如果 JavaScript 仍然是一个选项,请预先动态创建 CSS,如下所述: