复制 svg 动画

Question

当这个网站第一次加载时，会有这个动画，其中有一个三角形在另一个三角形上移动。

Image

http://nueuphoria.com/

我将如何复制相同的东西？

三角形在另一个三角形上的轨迹。

谁能提供一个jsfiddle它是如何完成的。

我从网站上找到了这个，但我不知道如何组合起来。

https://jsfiddle.net/s2z3xyd8/6/

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