Как создать светящуюся текстовую анимацию с помощью HTML и CSS | Keyframes

Всем Привет! Сегодня Вы узнаете, как создать красивую светящуюся текстовую анимацию с помощью HTML и CSS. Вы сможете посмотреть видео демонстрацию анимации текста, скопировать код или скачать архив с готовым кодом.

СКАЧАТЬ

ДЕМО

Создание текстовой анимации с помощью HTML и CSS

Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент. 

ДЕМО - ПРИМЕР:

M O N S T E R

HTML КОД:

<div class="wrapper">
   <span>M</span>
   <span>O</span>
   <span>N</span>
   <span>S</span>
   <span>T</span>
   <span>E</span>
   <span>R</span>
</div>

CSS КОД:

.wrapper span {
  color: #111;
  font-size: 5rem;
  font-weight: 700;
  animation: glow 2s ease-in-out infinite;
}

.wrapper span:nth-child(2) {
  animation-delay: 0.25s;
}

.wrapper span:nth-child(3) {
  animation-delay: 0.50s;
}

.wrapper span:nth-child(4) {
  animation-delay: 0.75s;
}

.wrapper span:nth-child(5) {
  animation-delay: 1s;
}

.wrapper span:nth-child(6) {
  animation-delay: 1.25s;
}

.wrapper span:nth-child(7) {
  animation-delay: 1.50s;
}



@keyframes glow {
  0%,
  100% {
    color: #fff;
    text-shadow: 0 0 12px lime, 0 0 50px lime, 0 0 100px lime;
  }
  10%,
  90% {
    color: #111;
    text-shadow: none;
  }
}