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

Question

我正在尝试为我的网站背景制作动画，它具有纯色背景，然后我想在其上添加 "sketch" 网格线。现在我把背景画成这样：

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>

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

How can I draw in gridlines in the background of a website after loading?

javascript

css

gridlines

linear-gradients

css-animations