CSS网格建筑动画答案

【问题标题】：CSS grid building animationCSS网格建筑动画
【发布时间】：2023-01-11 22:06:50
【问题描述】：

我想在网站打开时制作背景动画。我想在整个网站上创建一个网格，但我也希望它逐渐构建。有没有人知道我如何逐步构建这个网格？

这是我为单行动画写的东西：

div{
  height:0px;
  width:1px;
  border-bottom:1px solid #000;
  
  -webkit-animation: increase 3s;
  -moz-animation:    increase 3s; 
  -o-animation:      increase 3s; 
  animation:         increase 3s; 
  animation-fill-mode: forwards;
}

@keyframes increase {
    100% {
        width: 300px;
    }
}

问题是我想在后台做这个动画，我该如何实现呢？

另一种选择是使用在背景中重复自身的矩形。有没有办法让它动画化？（矩形逐渐出现）背景图：

【问题讨论】：

你试过什么了？
为什么用 css-animations 标记这个，动画在哪里？你的代码在哪里？你试过什么了？
正如我在问题中所说，我需要网格逐渐出现。我的猜测是这可以通过某种动画来完成。

标签： css css-animations

【解决方案1】：

没有示例代码，做不了什么。这是一个 CSS 方法来进行类似网格的显示。您可以将图像裁剪成正方形并将每个框用作单独的background，或者使用一个图像并设置每个框的background-position。

.grid {
  width: 100%;
  max-width: 200px;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.block {
  background: #f96;
  opacity: 0;
  visibility: hidden;
  animation: reveal 1s infinite ease;
}

@keyframes reveal {
  50% {
    opacity: 1;
    visibility: visible;
  }
}

.block:nth-child(1) {
  animation-delay: 50ms;
}

.block:nth-child(2) {
  animation-delay: 100ms;
}

.block:nth-child(3) {
  animation-delay: 150ms;
}

.block:nth-child(4) {
  animation-delay: 200ms;
}

.block:nth-child(5) {
  animation-delay: 250ms;
}

.block:nth-child(6) {
  animation-delay: 300ms;
}

.block:nth-child(7) {
  animation-delay: 350ms;
}

.block:nth-child(8) {
  animation-delay: 400ms;
}

.block:nth-child(9) {
  animation-delay: 450ms;
}

<div class="grid">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

【讨论】：