在 CSS 中生成随机网格

CSS 提供了很多实现视觉效果的方法，其中包括创建各种各样的网格。在本文中，我们将探索如何使用 CSS 在网格上添加随机性，从而创建出更加有趣的视觉效果。

基础网格

首先，我们需要创建一个基础的网格。这可以通过 CSS 的 Grid 等功能来实现，例如：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

这会创建一个由 3 行和 3 列组成的网格，每一行高度都是 100 像素，网格与网格之间有 10 像素的间距。

随机化网格

现在我们可以开始给网格加上随机性了。我们可以使用 CSS 的 nth-child 伪类，以及一些随机函数，来生成在网格元素上应用不同样式的规则。例如，以下代码可以随机化颜色：

.wrapper div:nth-child(1) {
  background-color: hsl(12, 90%, 60%);
}

.wrapper div:nth-child(2) {
  background-color: hsl(230, 90%, 60%);
}

.wrapper div:nth-child(3) {
  background-color: hsl(120, 90%, 60%);
}

/* ... */

.wrapper div:nth-child(9) {
  background-color: hsl(270, 90%, 60%);
}

然而，手动为每个元素设置颜色是非常冗长和无聊的。相反，我们可以使用 JavaScript 来生成颜色值，并将其应用于网格元素：

.wrapper div {
  background-color: var(--color);
}

function generateRandomColor() {
  var hue = Math.floor(Math.random() * 360);
  var saturation = 90;
  var lightness = 60;

  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

var elements = document.querySelectorAll('.wrapper div');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.setProperty('--color', generateRandomColor());
}

现在，每个网格元素都会随机获得一个颜色值。

随机化位置

此外，我们可以随机化网格元素的位置。首先，我们需要将网格元素的位置设置为相对定位：

.wrapper div {
  position: relative;
}

然后，我们可以使用 JavaScript 来生成元素的 top 和 left 属性值，并将其应用于元素：

function generateRandomPosition() {
  var top = Math.floor(Math.random() * 200) - 100;
  var left = Math.floor(Math.random() * 200) - 100;

  return { top, left };
}

var elements = document.querySelectorAll('.wrapper div');
for (var i = 0; i < elements.length; i++) {
  var position = generateRandomPosition();

  elements[i].style.top = position.top + 'px';
  elements[i].style.left = position.left + 'px';
}

这样，每个元素都会获得一个随机的 top 和 left 值，并随机位置出现在网格中。

结论

在这篇文章中，我们学习了如何使用 CSS 和 JavaScript 来创建具有随机性的网格。通过执行随机化颜色和位置等操作，可以创造出更加有趣的视觉效果。