6

Добрый день! Подскажите пожалуйста как сделать примерно такую анимацию на CSS:

https://www.youtube.com/watch?v=jxXFzbfud_w&feature=youtu.be

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

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

3
  • Можно такое сделать на svg - так будет полегче. Иначе можно разбить каждую букву на 1 отдельный тег и при помощи препроцессоров (sass, к примеру) при помощи цикла задать таймаут для анимации каждой буквы. Вообщем, это реально, но запарно. Делать мне лень такое (:
    – wokalek
    3 апр 2017 в 7:50
  • 2
    к сожалению на css такое геморно делать, могу вам предложить такую библиотеку textillate.js.org, посмотрите какие у нее есть эффекты, я видел там похожий и называется она bounce
    – jashka
    3 апр 2017 в 7:57
  • @VostokSisters На SVG тоже подойдет. Но если не хотите - вас никто не заставляет. Просто спросил, возможно ли такое.
    – Eugen Eray
    3 апр 2017 в 8:09

1 ответ 1

10

SVG решение:

Анимация начинается при наведении на ссылку
Анимация основана на изменении атрибута d path Промежуточные значения можно получить с помощью онлайн генератора квадратичных кривых Безье
Интересней выглядит в полно-экраном режиме.

<style>
  svg {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
  background-size:cover;
  width:50%
  height:50%
  }
 </style>
  
 <svg   viewBox="0 0 650 500">
    
<defs> 
 <path id="Lsvg" d="M100 200Q200,200 300,200 T500,200" style="stroke:teal;fill-opacity:0.3;stroke-width:3;fill:none">
<animate begin="0.5s"  dur="10s" restart="whenNotActive"  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="#026282">
  <textPath id="result" method="align" spacing="auto" startOffset="50%" xlink:href="#Lsvg"><tspan dy="-20">So easy to do with SVG just  few lines</tspan></textPath>
<animate
 begin="animLink.mouseover"
 dur="10s"
 repeatCount="1"
 attributeName="fill"
 values="red;green;red;green;red"/>
</text>
<use xlink:href="#Lsvg" transform="translate(0 -10)"/>
   
  <rect id="animLink" x="100" y="150" width="400" height="60" fill="#E0E0E0" fill-opacity="0.01" stroke="none" />  

    </svg>
 </body>
 </html>

Анимация с применением квадратичных кривых Безье подробно описана в ответе на вопрос «Можно ли сделать с помощью css такую анимацию?» Прочтите, если появился интерес, и тогда будет легче понять, как тут работает анимация.

Ваш ответ

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

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