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. Попробовать пример можно здесь.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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