Давайте разберем оригинальный эффект при наведение клика, где по умолчанию ключевое слово, которое установлено под ссылкой будет подчеркнутым. Но при наведение клика начнется волна, эта прямое подчеркивание преображает форму волны, где все происходит в анимационном виде, что смотрится оригинально.
Здесь задействуем стилистику и в нем формат svg, где не нужна установка jquery. Что ставим стили по месту, где к ссылкам задаем класс, чтоб этот эффект появился на сайте.
Приступаем к установке:
HTML
Код
<div class="gekipunsubs-cibegatime">
<a href="Ссылка на переход">Ключевое слово</a>
</div>
CSS
Код
.gekipunsubs-cibegatime a {
background: linear-gradient(to bottom, #1b69ad 0%, #1f639e 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 1px 1px;
color: #1d1c1c;
text-decoration: none;
padding-bottom: 2px;
}
.gekipunsubs-cibegatime a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23337AB7' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-2,10,-2 s 5,2,10,2 c 5,0,5,-2,10,-2 s 5,2,10,2'/%3E%3C/svg%3E");
background-position: 0 100%;
background-size: auto 3px;
background-repeat: repeat-x;
text-decoration: none;
}
Где изначально можно сделать только на статьях или материалах, или на тех запросах, которые отвечают за навигацию.
Демонстрация
