随机属性纯 CSS答案

【问题标题】：Random properties pure CSS随机属性纯 CSS
【发布时间】：2012-10-29 03:54:23
【问题描述】：

我只是想知道，是否可以仅使用 CSS 随机生成属性，或者需要一些 javascript。

我想要达到的效果是让彩色的 div 随机定位在页面上。

http://jsfiddle.net/pphheerroonn/F95Ju/2/embedded/result/

HTML:
<div class="box wsbg1"></div>
<div class="box wsbg2"></div>
<div class="box wsbg3"></div>
<div class="box wsbg4"></div>


CSS:
body {
    height: 600px; background-color: #66ccff;}
.box {
    height: 200px; width: 200px; 
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -webkit-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.3);
}
.wsbg1 {background-color: #ec0689;}
.wsbg2 {background-color: #ffde00;}
.wsbg3 {background-color: #09aeee;}
.wsbg4 {background-color: #5eb345;}

【问题讨论】：

如果我理解正确，您希望 CSS 为这些 CSS 元素生成随机位置？
是的，我认为这不可能？
无法使用 CSS。这有点牵强，但您可以使用 PHP 生成一定范围内的随机数（或百分比，因为这个原因），该位置的值将是；但是，这仅适用于 <style> 标记内的 CSS，而不适用于链接的样式表。

标签： javascript html css

【解决方案1】：

不，CSS 是确定性的。要么使用 javascript 创建随机性，要么每次使用 PHP 提供一个随机生成的 css 文件。

【讨论】：

【解决方案2】：

您可以使用 CSS 预处理器（例如 LESS 或 SASS）来做到这一点，以下是相同的相关答案：

Possible to create random numbers in SASS / Compass?

【讨论】：

这只会在 CSS 生成时随机化。我也在寻找一种不使用 javascript 来真正随机化 CSS 动画的方法。