Этот эффект текста с переходом эффекта по знакам, который отлично смотрится на темном фоне. Все создано при помощи CSS и SVG, и как можно заметить, что что результат получился великолепно. Есть много вариантов для применение, также можно поставить под логотип, который должен безусловно выставлен знаками.
Здесь все производиться в плане выделение текста на сайте или страницы странице, со средствами css3, все для того, чтобы создать с последствием выставление плавного эффекта рисования.
Так смотрится на тестовой площадке, где будет предоставлена Demo страница, чтоб можно изначально посмотреть.
HTML
Код
<div class="maketingulas-spakizonekon">
<svg viewBox="0 205 600 600">
<symbol id="text">
<text text-anchor="middle" x="50%" y="50%">ZORNET.RU</text>
</symbol>
<use xlink:href="#text" class="nversion"></use>
<use xlink:href="#text" class="nversion"></use>
<use xlink:href="#text" class="nversion"></use>
<use xlink:href="#text" class="nversion"></use>
</svg>
</div>
CSS
Код
.maketingulas-spakizonekon {
font-weight: 800;
font-size: 27px;
opacity: 1;
}
.maketingulas-spakizonekon svg {
width: 90%;
display: block;
top: 50%;
margin: -8% 0 0 5%;
position: fixed;
}
.maketingulas-spakizonekon svg .nversion {
width: 100%;
fill: transparent;
stroke-width: 1;
stroke-linejoin: round;
stroke-dasharray: 90,310;
stroke-dashoffset: 0;
-webkit-animation: text 8s infinite linear;
animation: text 8s infinite linear;
}
.maketingulas-spakizonekon svg .nversion:nth-child(4n + 1) {
stroke: #999;
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.maketingulas-spakizonekon svg .nversion:nth-child(4n + 2) {
stroke: #999;
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
.maketingulas-spakizonekon svg .nversion:nth-child(4n + 3) {
stroke: #999;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
.maketingulas-spakizonekon svg .nversion:nth-child(4n + 4) {
stroke: #999;
-webkit-animation-delay: -8s;
animation-delay: -8s;
}
@-webkit-keyframes text {
100% {
stroke-dashoffset: -400;
}
}
Демонстрация
