• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать эффект волны при наведение клика (Оригинальный анимационные эффекты волны с наведением ссылки)
Сделать эффект волны при наведение клика
Kosten
Дата: Четверг, 2019-02-21, 23:14 | Сообщение 1
Администраторы
Сообщений:21563
Награды: 56


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

Здесь задействуем стилистику и в нем формат 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;
}

Где изначально можно сделать только на статьях или материалах, или на тех запросах, которые отвечают за навигацию.

Демонстрация
Прикрепления: 5396654.jpg(51.0 Kb) · redsa.zip(1.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать эффект волны при наведение клика (Оригинальный анимационные эффекты волны с наведением ссылки)
  • Страница 1 из 1
  • 1
Поиск: