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

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>