В нашей подборке уже есть оригинальные, но главное интересные возможности для текста на CSS и SVG, где ранее о которых некоторых эффектах в какое-то время назад мы могли только мечтать. Ведь здесь у нс опять анимация текста, которая используется при использование CSS. Где по аналогичному эффекту мы выставляем текстура, где аналогично станет появляться, что для оригинальных сайтов станет отличным предложением.
1. С появлением:
2. Полностью текст отражается:
Установка:
HTML
Код
<svg height="100" stroke="#3677c7" stroke-width="2" class="stroke-fill" width="100%">
<text x="50%" dominant-baseline="middle" text-anchor="middle" y="50%">#ZorNet.Ru</text></svg>
CSS
Код
.stroke-fill {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: dash 5s linear forwards, filling 5s ease-in forwards;
font-size: 80px;
}
.stroke-fill text {
font-family: Helvetica,Arial,sans-serif;
font-weight: normal;
font-style: normal;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes filling {
0%, 90% { fill: #3688c7; fill-opacity: 0; }
100% { fill: #3688c7; fill-opacity: 1; }
}
Оригинальный эксперимент, где идет способ создания текстового текста с узором и заливкой.
Демонстрация
