3

Столкнулся с интересной проблемой, возможно ли сделать анимацию данной линии от начала до конца?

Поискал решения, есть решение нарисовать одну линию поверх другой и вторая линия в местах разрыва имеет фон такой же, как у секции и получается будто пунктир, но у меня фон градиентом, и что делать ?

введите сюда описание изображения

2
  • @Alexandr_TT, да, я в курсе, отмечу решением завтра скорее всего, я просто еще не применил ничего ) 4 апр 2018 в 18:25
  • @Alexandr_TT, расслабьтесь, с момента ответа прошло не так много времени, у меня просто нет возможности сейчас проверить ваше решение, вы правы - оно готово и работает, но возможно не так как нужно) Завтра я всё отмечу, спасибо за ваш ответ. 4 апр 2018 в 18:35

3 ответа 3

5

Решение SVG

Решение адаптивно, работает во всех современных браузерах, кроме IE, Edge;

#rect1 {
fill:url(#Grad1);
}
#str{
stroke-dasharray:10 20;
stroke-dashoffset:900px; 
fill:none;
stroke:white;
stroke-width:4;
}
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"  viewBox="0 0 1920 715"> 
<defs>
<linearGradient id="Grad1"  gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00ADB3" />
		 <stop offset="100%" stop-color="#01CEAD" />
      </linearGradient>
</defs>
	
<rect id="rect1" width="100%" height="100%"   />
<path id="str" d="m227.3 703.4c0 0 100.3-73.4 157.7-95.1 64.7-24.4 135.1-32.9 204.1-37.1 65.7-4 131.4 14.8 197.1 11.6 59.4-2.9 122.5-2.4 176.3-27.8 43.1-20.4 70.9-63.7 106.7-95.1 33.8-29.6 32.3-50 102-88.1 44.4-24.3 97.8-32.9 148.4-32.5 55.3 0.5 110.7 11.7 162.3-11.6 44-19.9 86.7-44.6 122.9-76.5 32.2-28.3 50.7-69.5 81.2-99.7 24.6-24.4 50.2-49.3 81.2-64.9 35-17.6 113.6-30.2 113.6-30.2l0 0">
<animate attributeName="stroke-dashoffset" values="900;0" dur="5s" repeatCount="indefinite" />
</path>
</svg> 

4

Решение CSS

Path такой-же, как и в решении SVG, так как в CSS пока нет возможностей рисовать кривые. Но анимация реализована с помощью правил CSS

#rect1 {
fill:url(#Grad1);
}
#str{
stroke-dasharray:10 20;
stroke-dashoffset:900px; 
fill:none;
stroke:white;
stroke-width:4;
animation: dash 8s forwards infinite;
}
@keyframes dash {
  0% { 
    stroke-dashoffset: 900px;
  }
   50% { 
    stroke-dashoffset: 450px;
  }
  
  100% {
    stroke-dashoffset: 0px;
  }
}
 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"  viewBox="0 0 1920 715"> 
<defs>
<linearGradient id="Grad1"  gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00ADB3" />
		 <stop offset="100%" stop-color="#01CEAD" />
      </linearGradient>
</defs>
	
<rect id="rect1" width="100%" height="100%"   />
<path id="str" d="m227.3 703.4c0 0 100.3-73.4 157.7-95.1 64.7-24.4 135.1-32.9 204.1-37.1 65.7-4 131.4 14.8 197.1 11.6 59.4-2.9 122.5-2.4 176.3-27.8 43.1-20.4 70.9-63.7 106.7-95.1 33.8-29.6 32.3-50 102-88.1 44.4-24.3 97.8-32.9 148.4-32.5 55.3 0.5 110.7 11.7 162.3-11.6 44-19.9 86.7-44.6 122.9-76.5 32.2-28.3 50.7-69.5 81.2-99.7 24.6-24.4 50.2-49.3 81.2-64.9 35-17.6 113.6-30.2 113.6-30.2l0 0">
</path>
</svg> 

1

Попробуйте анимировать свойство stroke-dashoffset. Попробовать пример можно здесь.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.