• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Текстовая анимация обвода знаков на CSS3 (Красивая текстовая анимация обводки и заливки HTML5 + CSS3)
Текстовая анимация обвода знаков на CSS3
Kosten
Дата: Суббота, 2021-05-15, 22:15 | Сообщение 1
Онлайн
Администраторы
Сообщений:37904
Награды: 65


В нашей подборке уже есть оригинальные, но главное интересные возможности для текста на 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; }
}

Оригинальный эксперимент, где идет способ создания текстового текста с узором и заливкой.

Демонстрация
Прикрепления: 6314030.png(16.6 Kb) · 3423524.png(16.7 Kb) · 3143142.zip(2.8 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Текстовая анимация обвода знаков на CSS3 (Красивая текстовая анимация обводки и заливки HTML5 + CSS3)
  • Страница 1 из 1
  • 1
Поиск: