Анимированное подчеркивание текста
- Информация о материале
- Категория: Админ
- Просмотров: 506
Пример анимированного подчеркивания текста с использованием 2-х линий на SVG
Пример:
Анимированное подчеркивание текста
Решение подходит для выделения важного слова или слов в заголовках
HTML:
<div class="underline"> Анимированное <span class="underline-text">подчеркивание<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"> <path d="M5,125.4c30.5-3.8,137.9-7.6,177.3-7.6c117.2,0,252.2,4.7,312.7,7.6"></path> <path d="M26.9,143.8c55.1-6.1,126-6.3,162.2-6.1c46.5,0.2,203.9,3.2,268.9,6.4"></path> </svg></span> текста </div>
CSS:
.underline { font-family: "Roboto Condensed", sans-serif; font-size: 32px; line-height: 50px; margin: 20px 0; text-align: center; } .underline span { position: relative; } .underline svg { position: absolute; width: 100%; height: 60px; left: 0; top: 0; z-index: -1; } .underline svg path { stroke: red; stroke-width: 9; fill: none; animation: underline 10s infinite; animation-delay: 0s; opacity: 0; } .underline svg path + path { animation-delay: 0.5s; } @keyframes underline { 0% { stroke-dasharray: 0 1500; opacity: 1; } 15% { stroke-dasharray: 1500 1500; } 85% { opacity: 1; } 90% { stroke-dasharray: 1500 1500; opacity: 0; } 100% { stroke-dasharray: 0 1500; opacity: 0; } }