При помощи HTMLи стилистике CSS можно создать красивую текстовую анимацию. Которую можно поставить под ключевые слова или логотип. Она делается для того, чтоб как можно больше внимание было.
Здесь безусловно все зависит от самого трюка. В материале представлена анимация, где можно применить несколько оттенков цвета. А это создать как под светлый или темный фон с прикрепленный шрифтом.
Так выглядит на светлом фоне.
Здесь на темном уже немного по другому, хотя вся палитра осталась по умолчанию.
HTML
Код
<svg viewBox="0 0 960 300">
<symbol id="gesa-migun">
<text text-anchor="middle" x="50%" y="80%">Zornet.Ru</text>
</symbol>
<g class = "g-ants">
<use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
<use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
<use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
<use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
<use xlink:href="#gesa-migun" class="sudanud-kopesta"></use>
</g>
</svg>
CSS
Код
svg {
display: block;
font: 10.5em 'Montserrat';
width: 673px;
height: 275px;
margin: 0 auto;
}
.sudanud-kopesta {
fill: none;
stroke: #f5f2f2;
stroke-dasharray: 6% 29%;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
.sudanud-kopesta:nth-child(1){
stroke: #481138;
animation-delay: -1;
}
.sudanud-kopesta:nth-child(2){
stroke: #7b0a39;
animation-delay: -2s;
}
.sudanud-kopesta:nth-child(3){
stroke: #c71748;
animation-delay: -3s;
}
.sudanud-kopesta:nth-child(4){
stroke: #d41a4d;
animation-delay: -4s;
}
.sudanud-kopesta:nth-child(5){
stroke: #f3b949;
animation-delay: -5s;
}
@keyframes stroke-offset{
100% {stroke-dashoffset: -35%;}
}
Демонстрация
