css - 网格框之间的 SVG 线

Question

我正在尝试在我的网格框之间添加动画 SVG 线，类似于 like this example , 但水平。

我遇到了两个问题，在阅读所有内容之后，我仍然无法解决:

1:如何将 SVG 线与其他框的中间对齐？ 2:我喜欢像上面的例子那样让点动画化，但借用该代码并将其应用于线条似乎没有任何影响。

svg {
    height: 5rem;
    width: 100%;
    text-align: center;
}

svg>line {
    stroke: #000;
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-dasharray: 1px 10px;
    animation: animateline 5s linear both infinite;
}

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 0;
}

.box {
    border: 2px solid #000;
}

<div class="container">
    <div class="box">
        <p>Box 1</p>
    </div>
    <svg>
        <line x1="0" x2="500" y1="10" y2="10" />
    </svg>
    <div class="box">
        <p>Box 2</p>
    </div>
    <svg>
        <line x1="0" x2="500" y1="10" y2="10" />
    </svg>
    <div class="box">
        <p>Box 3</p>
    </div>
</div>

Answer 1

这是一个更简单的想法，它依赖于背景位置的渐变和动画。顺便说一句，您应该将背景添加到框元素以隐藏不需要的背景部分:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: calc(100%/5) calc(100%/5) calc(100%/5);
    grid-gap: calc(100%/5);
    background:radial-gradient(8px 4px at center,#000 50%,transparent 50%) 0 50%/16px 200px;
    animation:change 3s linear infinite;
}

.box {
    border: 2px solid #000;
    background:#fff;
}

@keyframes change {
  from {
    background-position:0 50%;
  }
  to {
    background-position:32px 50%;
  }
}

<div class="container">
    <div class="box">
        <p>Box 1</p>
    </div>
    <div class="box">
        <p>Box 2</p>
    </div>

    <div class="box">
        <p>Box 3</p>
    </div>
</div>

如果您需要透明度并且只有 3 个框，您可以考虑如下所示的 pseuo 元素:

.container {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: calc(100%/5) calc(100%/5) calc(100%/5);
  grid-gap: calc(100%/5);
  position:relative;
}

.container::before,
.container::after {
  content: "";
  position:absolute;
  top: 0;
  bottom: 0;
  width: calc(100%/5);
  background: 
   radial-gradient(8px 4px at center, #000 50%, transparent 50%) 0 50%/16px 200px;
  animation: change 3s linear infinite;
}
.container::before {
  left:calc(100%/5);
}
.container::after {
  right:calc(100%/5);
}

.box {
  border: 2px solid #000;
}
body {
  background:pink;
}
@keyframes change {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: 32px 50%;
  }
}

<div class="container">
  <div class="box">
    <p>Box 1</p>
  </div>
  <div class="box">
    <p>Box 2</p>
  </div>

  <div class="box">
    <p>Box 3</p>
  </div>
</div>