Необычная SVG анимация при наведении на ссылки
Достаточно необычный эффект при наведении на ссылку - как будто кто-то обводит её ручкой
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
:root { --text: #2B3044; --line: #BBC1E1; --line-active: #275EFE; } p.link { font-size: 18px; margin: 0; color: var(--text); } p.link a { display: inline-block; position: relative; text-decoration: none; color: inherit; margin: 0 var(--spacing, 0px); -webkit-transition: margin .25s; transition: margin .25s; } p.link a svg { width: 76px; height: 40px; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 7px) translateZ(0); transform: translate(-50%, 7px) translateZ(0); fill: none; stroke: var(--stroke, var(--line)); stroke-linecap: round; stroke-width: 2px; stroke-dasharray: var(--offset, 69px) 278px; stroke-dashoffset: 361px; -webkit-transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s; transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s; } p.link a:hover { --spacing: 4px; --stroke: var(--line-active); --stroke-delay: .1s; --offset: 180px; } |
2#: Ссылки оформляем следующим образом:
|
1 2 3 4 5 6 7 8 9 |
<p class="link"> Наведите курсор на <a href="#"> эту ссылку <svg viewBox="0 0 70 36"> <path d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527" /> </svg> </a> </p> |
