每次刷新时生成 CSS 个形状

Question

我的想法是做一个像长方形这样的主要形状。在这个矩形内，我希望在每次刷新时拥有随机形状，如三角形、立方体。这可能与 CSS 还是我需要一个 js 脚本？

Answer 1

您最好尝试使用 SVG 而不是 CSS 生成形状。但是，是的，你需要 JS 来设置随机方面。

Answer 2

你将不得不使用 JS。最好的选择是创建一个 classes 数组，每个代表一个不同的形状。然后，在每次加载页面时，您将数组中的随机 class 分配给您选择的元素。但是，正如其他人所说，如果使用 SVG 而不是 CSS.

生成形状会更好

Answer 3

您需要使用脚本包含一个 'random class' 生成器。例如。下面是 'how to assign a random class to a div on each load' 的一个简短示例。基础是这样的：

$(document).ready(function() {
  function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);

  }
  var x = randomIntFromInterval(1, 3);
  var myclass;
  switch (x) {
    case 1:
      myclass = "classOne";
      break;
    case 2:
      myclass = "classTwo";
      break;
    case 3:
      myclass = "classThree";
      break;
  };
  $('div').addClass(myclass);
});

div {
  height: 300px;
  width: 300px;
  position: relative;
}
.classOne { /*simple square*/
  background: red;
}
.classTwo { /*simple triangle*/
  background: transparent;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  height: 0;
  width: 0;
  border-bottom: 300px solid blue;
}
.classThree { /*simple circle*/
  background: green;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

使用说明

点击'run snippet'多次查看效果

它使用 switch 语句在每次加载文档时随机将 class 添加到 'div'。

注

此示例使用三种可能的 classes，但这可以增加：

在此处增加最大变量：randomIntFromInterval(1, 3);
向 switch 语句添加额外用例：case 4:，其中 4 是函数返回的可能值
在您的 css
将此 myclass class 名称添加到您的 switch 语句中

在每个后续加载中，甚至有可能分配给每个不同的值。

每次刷新时生成 CSS 个形状

Generate CSS Shapes at every refresh

css

css-shapes