Приветствую вас, дорогие читатели! Сегодня я расскажу как сделать неоновый текст с помощью CSS. Предупрежу сразу, что в старых браузерах возможно некорректное отображение, из-за отсутствия поддержки CSS3, но в новых все будет работать идеально! 
Шаг 1. HTML
Здесь ничего особенного — обычный html каркас. В контейнере div находятся буквы, которые обернуты в тег span. Это нужно для того, чтобы светилась каждая буква.
<div class="neon-text"> <span>Н </span> <span>Е</span> <span>О</span> <span>Н</span> <span>О</span> <span>В</span> <span>Ы</span> <span>Й</span> <span> </span> <span>Т</span> <span>Е</span> <span>К</span> <span>С</span> <span>Т</span> </div>
Шаг 2. CSS
Самое время применить необходимые стили css
/* Неоновый текст
------------------------------------------*/
.neon-text {
display: block;
position: absolute;
}
.neon-text span{
display: inline-block;
font:36px Verdana,Arial,Helvetica, sans-serif;
text-shadow: 0 0 15px;
color: #FFF;
}
.neon-text p:nth-child(odd) {
-webkit-animation: bglow .3s ease infinite;
}
.neon-text p:nth-child(even) {
-webkit-animation: rglow .3s ease infinite;
}
@-webkit-keyframes bglow {
0% {
color: rgb(0, 135, 211);
text-shadow: 0 0 10px;
}
}
@-webkit-keyframes rglow {
100% {
color: rgb(233, 54, 40);
text-shadow: 0 0 10px;
}
}
Вот и все, что нам потребовалось для создания неонового текста. Удачи в освоении!
Получайте новые статьи блога прямо себе на почту