javascript - 加载后如何在网站背景中绘制网格线？

Question

我正在尝试为我的网站背景制作动画，它具有纯色背景，然后我想在其上“绘制”网格线。现在我把背景画成这样:

background-color: #269;
background-image: linear-gradient(@light-grey 2px, transparent 2px),
    linear-gradient(90deg, @light-grey 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;

我希望它是这样的，除了我希望线性渐变逐个加载并尽可能让它们看起来像草图。

我试着查看这段代码: Background color change on page load

它看起来有点像我正在尝试做的事情，但我不想改变整个背景，我只想在网格中绘制。

我还认为我可能需要使用它在页面加载后绘制: JavaScript that executes after page load

我应该为线性渐变分配 ID 并在 Javascript 函数中调用它们吗？

Answer 1

实现此目的的一种方法根本不涉及 JavaScript。

相反，它使用仅包含背景的网格线部分的 CSS 伪元素，并在其从 0px * 0px 大小延伸到 100% * 100% 时对其进行动画处理。

代码的基本要点如下所示(更新后显示在 div 内容后面):

div {
  /* Background color code is placed here */
  position: relative;
  z-index: 0;
}

div::before {
  /* Grid background code is placed here */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: " ";
  animation: gridWipe 1s linear;
}

@keyframes gridWipe {
  0% {
    width: 0px;
    height: 0px;
  }

  100% {
    width: 100%;
    height: 100%;
  }
}

要查看实际效果，请查看 this JSFiddle .