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

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

.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>

网格框之间的SVG线

1 个答案: