• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект анимации текста с помощью SVG + CSS (Создаем SVG анимацию, используя стилей CSS + HTML)
Эффект анимации текста с помощью SVG + CSS
Kosten
Дата: Понедельник, 2018-12-03, 00:27 | Сообщение 1
Администраторы
Сообщений:18866
Награды: 55


Этот эффект текста с переходом эффекта по знакам, который отлично смотрится на темном фоне. Все создано при помощи 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;
  }
}


Демонстрация
Прикрепления: 7702898.png(9.2 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект анимации текста с помощью SVG + CSS (Создаем SVG анимацию, используя стилей CSS + HTML)
  • Страница 1 из 1
  • 1
Поиск: