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

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。

Answer 2

您可以使用repeating-linear-gradient 以不同方式创建背景，然后为background-size 设置动画，如下所示：

div.box {
  background-image: 
    repeating-linear-gradient(to bottom,transparent,transparent 98px,lightGray 98px,lightGray 100px),
    repeating-linear-gradient(to right, transparent,transparent 98px,lightGray 98px,lightGray 100px),
    
    repeating-linear-gradient(to bottom,transparent ,transparent 19px,rgba(255, 255, 255, 0.3) 19px,rgba(255, 255, 255, 0.3) 20px),
    repeating-linear-gradient(to right, transparent ,transparent 19px,rgba(255, 255, 255, 0.3) 19px,rgba(255, 255, 255, 0.3) 20px);
  background-repeat:no-repeat;
  background-color: #269;
  width: 300px;
  height: 300px;
  animation:gridWipe 3s linear;
}

@keyframes gridWipe {
  0% {
    background-size:0 0;
  }
  100% {
    background-size:100% 100%;
  }

}

p {
  background: rgba(255,255,0,0.5);
}

<div class="box">
<p>Lorem ipsum</p>
</div>

你也可以考虑一些 CSS 变量来优化你的代码：

div.box {
  --l_b:2px; /*width of the big line*/
  --l_s:1px; /*width of the small line*/
  --d_b:100px; /*distance between big lines*/
  --d_s:20px; /*distance between small lines*/

  --c1:transparent,transparent calc(var(--d_b) - var(--l_b)),lightGray calc(var(--d_b) - var(--l_b)),lightGray var(--d_b);
  --c2:transparent,transparent calc(var(--d_s) - var(--l_s)),rgba(255, 255, 255, 0.3) calc(var(--d_s) - var(--l_s)),rgba(255, 255, 255, 0.3) var(--d_s);
  
  background-image: 
    repeating-linear-gradient(to bottom,var(--c1)),
    repeating-linear-gradient(to right, var(--c1)),
    
    repeating-linear-gradient(to bottom,var(--c2)),
    repeating-linear-gradient(to right, var(--c2));
  background-repeat:no-repeat;
  background-color: #269;
  width: 300px;
  height: 300px;
  animation:gridWipe 3s linear;
}

@keyframes gridWipe {
  0% {
    background-size:0 0;
  }
  100% {
    background-size:100% 100%;
  }

}

p {
  background: rgba(255,255,0,0.5);
}

<div class="box">
<p>Lorem ipsum</p>
</div>