Пример:
Анимированное подчеркивание текста
HTML:
|
1 2 3 4 5 |
<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:
|
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 43 44 45 46 47 48 49 |
.underline { font-family: 'Roboto', 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; } } |
Добавить комментарий: