Question

该网站首次加载时，会显示此动画，其中有一个三角形位于另一个三角形上。

我将如何复制同一件事？

三角形在另一个三角形上的位置。

有人能提供如何完成的信息吗？

我是从网站上找到的，但我不知道如何将其组合在一起。

<div>
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 47.96 51.66">
<defs>
<style>
.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px;}</style>
</defs>
<g id="Слой_2" data-name="Слой 2">
<g id="play">
<path class="cls-1" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"></path>
</g>
</g>
</svg>
</div>

Answer 1

它只是使用了对stroke-dashoffset进行动画处理的常见线条绘制技术。您缺少的是@keyframes的定义。

.logo-load_w svg path {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  -webkit-animation: draw 20s infinite linear;
  animation: draw 20s infinite linear;
}

@-webkit-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<div class="logo-load_w">
  <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 47.96 51.66"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px;}</style></defs><g id="Слой_2" data-name="Слой 2"><g id="play"><path class="cls-1" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"></path></g></g></svg>
</div>

背景中的黑色三角形只是SVG的第二个副本，stroke颜色设置为其他颜色。

更新

在蓝色的三角形后面有一个较暗的三角形的最简单方法不是原始站点执行此操作的方法。仅将三角形的第二个副本添加到SVG中会更容易。您将它放在SVG中的较早位置，以便首先绘制它。并将其笔触颜色设为黑色。

.logo-load_w svg .play {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  -webkit-animation: draw 20s infinite linear;
  animation: draw 20s infinite linear;
}

@-webkit-keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<div class="logo-load_w">

  <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 47.96 51.66">
    <defs>
      <style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px;}</style>
    </defs>
    <g class="cls-1">
      <path stroke="black"
            d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
      <path class="play"
            d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
      </g>
    </g>
  </svg>

</div>

复制svg动画

1 个答案:

更新