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

复制 svg 动画

Replicating an svg animation

svg

svg-animate

更新