Анимированный текст на SVG и CSS3
|
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 |
svg { display: block; font-size: 55px; width: 900px; height: 500px; margin: 0 auto; } .text-copy { fill: none; stroke: white; stroke-dasharray: 6% 29%; stroke-width: 5px; stroke-dashoffset: 0%; animation: stroke-offset 5.5s infinite linear; } .text-copy:nth-child(1) { stroke: #4D163D; animation-delay: -1; } .text-copy:nth-child(2) { stroke: #840037; animation-delay: -2s; } .text-copy:nth-child(3) { stroke: #BD0034; animation-delay: -3s; } .text-copy:nth-child(4) { stroke: #BD0034; animation-delay: -4s; } .text-copy:nth-child(5) { stroke: #FDB731; animation-delay: -5s; } @keyframes stroke-offset { 100% { stroke-dashoffset: -35%; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<svg viewBox="0 0 960 300"> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="80%">IMAPO.RU - Уникальные скрипты</text> </symbol> <g class="g-ants"> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> </g> </svg> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
