前端 Js 生成好看的背景

const generateBoxes = (limit, parent) => {
  const colors = [
    "#577590",
    "#43aa8b",
    "#90be6d",
    "#f9c74f",
    "#f8961e",
    "#f3722c",
    "#f94144",
  ];
  for (let i = 0; i < limit; i += 1) {
    const box = document.createElement("div");
    box.classList.add("box");
    box.style.backgroundColor =
      colors[Math.floor(Math.random() * colors.length)];
    box.style.height = `${Math.floor(Math.random() * 300 + 50)}px`;
    box.style.width = `${Math.floor(Math.random() * 300 + 50)}px`;
    box.style.top = `${Math.floor(Math.random() * 100)}%`;
    box.style.left = `${Math.floor(Math.random() * 100)}%`;
    parent.appendChild(box);
  }
};

这个代码真心好使

.box {
  position: absolute;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  opacity: 0.2;
  transition: all 0.3s ease-in-out;
  z-index: -100;
  // cursor: pointer;
  &:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }

  &-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -100;

    @supports (-webkit-touch-callout: none) {
      height: -webkit-fill-available;
    }
  }
}
.box {
  position: absolute;
  opacity: 0.2;
  border-radius: 10px;
}