Анимация ссылки в формы “волны” на CSS

382

04 апреля 2017, 11:03

Добрый день! Подскажите пожалуйста как сделать примерно такую анимку на CSS https://www.youtube.com/watch?v=jxXFzbfud_w&feature=youtu.be

Только еще один вопрос по этой анимке: можно ли, чтобы буквы красились в определнный цвет при наведении волной? Или это бред?

Answer 1

SVG решение:

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  
 </head> 
  
 <body>   
   
 <svg version="1.1" 
     baseProfile="full" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns:ev="http://www.w3.org/2001/xml-events" 
	  width="600" height="600"> 
	 
  	<rect id="bkgrnd" x="0" y="0" width="600" height="300" style="fill:#E0E0E0"/>  
<defs> 
<path id="Lsvg" d="M100 200Q200,200 300,200 T500,200" style="stroke:blue;fill-opacity:0.3;stroke-width:3;fill:none"> 
<animate begin="go.click" dur="5s" repeatCount="1" attributeName="d"  
values="M100 200Q200,200 300,200 T500,200; 
M100 200Q200,100 300,200 T500,200; 
M100 200Q200,200 300,200 T500,200; 
M100 200Q200,300 300,200 T500,200; 
M100 200Q200,200 300,200 T500,200"/>  
</path> 
</defs> 
<text text-anchor="middle" font-size="25" fill="red"> 
      <textPath id="result" method="align" spacing="auto" startOffset="50%" xlink:href="#Lsvg"><tspan dy="-10">So easy to do with SVG just  few lines</tspan></textPath> 
<animate begin="go.click" dur="10s" repeatCount="1" attributeName="fill" 
values="red;green;red;green;red"/> 
</text> 
<use xlink:href="#Lsvg"/> 
   <rect id="go" x="520" y="256" width="60" height="30" style="fill:black;fill-opacity:0.1"/> 
<text x="550" y="280" text-anchor="middle" font-size="25" pointer-events="none">GO</text> 
     
 
	</svg> 
 </body> 
 </html>

Анимация с применением квадратичных кривых Безье - подробно на нашем сайте Прочтите, если появился интерес, и тогда будет легче понять как тут работает анимация.