Репликация SVG-анимации - PullRequest
Новая
       10

Репликация SVG-анимации

1 голос
/ 25 июня 2019

Когда этот сайт загружается впервые, появляется эта анимация, где есть треугольник, который пересекает другой треугольник.

Изображение

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>

1 Ответ

1 голос
/ 25 июня 2019

Это просто использование обычной техники рисования линий анимации 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>
...