前端使用 CSS3 样式表实现酷炫六边形网格背景图

使用 CSS3 样式表可以很方便地实现酷炫的六边形网格背景图，下面是实现的步骤：

1、创建 HTML 页面

首先，我们需要创建一个 HTML 页面，并为其添加一个容器元素。例如，可以在 HTML 页面中添加以下代码：

<div class="hex-container"></div>

2、添加 CSS 样式

接下来，我们需要添加 CSS 样式来实现六边形网格背景图。具体来说，需要实现以下步骤：

• 为容器元素设置宽度、高度和背景颜色。
• 通过 CSS3 的伪元素 ::before 和 ::after 来创建六边形。
• 使用 transform 属性将六边形旋转并定位到正确的位置。

以下是实现六边形网格背景图的 CSS 代码：

.hex-container {
  width: 100%;
  height: 100vh;
  background-color: #1c1c1c;
  position: relative;
  overflow: hidden;
}

.hex {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: #fff;
  transform: rotate(30deg);
}

.hex::before, .hex::after {
  content: '';
  position: absolute;
  width: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
}

.hex::before {
  bottom: 100%;
  border-bottom: 43px solid #fff;
}

.hex::after {
  top: 100%;
  width: 0;
  border-top: 43px solid #fff;
}

3、使用 JavaScript 动态生成六边形

如果需要生成多个六边形，则可以使用 JavaScript 动态生成。例如，可以编写以下 JavaScript 代码来生成多个六边形：

const container = document.querySelector('.hex-container');
const hexCount = 60;

for (let i = 0; i < hexCount; i++) {
  const hex = document.createElement('div');
  hex.classList.add('hex');
  container.appendChild(hex);
  hex.style.left = (i % 6) * 150 + 'px';
  hex.style.top = Math.floor(i / 6) * 100 + 'px';
}

通过以上步骤，我们就可以使用 CSS3 样式表实现酷炫的六边形网格背景图了。