✅ Как создать SVG Text анимацию?
Если говорить подробно, SVG — Text Animation это мощный текстовый эффект CSS, разработанный автором Webstoryboy. Он предоставляет вам возможность выделить ваш текст, добавив эффекты к контуру и фону текста. ⬇️
☑️ Сначала будет показан контур вашего текста, чтобы люди могли узнать его содержание, а затем фон. Он работает постоянно, чтобы вы могли привлечь больше внимания посетителей вашего сайта.
Мы сделали HTML & CSS код ниже, чтобы вы смогли добавить SVG эффект прямо себе на сайт:
HTML ⤵️
Если говорить подробно, SVG — Text Animation это мощный текстовый эффект CSS, разработанный автором Webstoryboy. Он предоставляет вам возможность выделить ваш текст, добавив эффекты к контуру и фону текста. ⬇️
☑️ Сначала будет показан контур вашего текста, чтобы люди могли узнать его содержание, а затем фон. Он работает постоянно, чтобы вы могли привлечь больше внимания посетителей вашего сайта.
Мы сделали HTML & CSS код ниже, чтобы вы смогли добавить SVG эффект прямо себе на сайт:
HTML ⤵️
<svg viewbox="0 0 1320 300">
<text>
webstoryboy
</text>
</svg>
CSS ⤵️svg {
font-family: sans-serif;
position: absolute;
width: 50%; height: 50%;
}
svg text {
animation: stroke 5s infinite alternate;
stroke-width: 2;
stroke: #365fa0;
font-size: 100px;
font-weight: 600;
}
@keyframes stroke {
0% {
fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1);
stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
}
70% {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); }
80% {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); stroke-width: 3; }
100% {
fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0);
stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
}
}
#обучение #html #css