» » Текст неоновый, мигающий на css

Текст неоновый, мигающий на css

Доброго дня уважаемые читатели! 
Вот и пролетела неделя нового 2021 года. 
Уже завтра наступит Рождество! С этим светлым праздником я и хочу Вас поздравить. 
поздравить
Сегодня предлагаю посмотреть ещё один вариант неонового текста на css, который не только светится, но и мигает отдельными буквами. Текстом можно оформить поздравление в статье или установить как гаджет в боковую панель или подвал. Вариантов использования текста много. Код нашла на очень интересном и полезном сайте https://atuin.ru/. 

Мигающий текст

Мигающий текст
Код надписи:
<div class="sign-wrap-4">
    <div class="sign_word">По<span>здра</span>вл<span>яю</span> Ва<span>с!</span></div>
</div>
<style>
.sign-wrap-4 {
    background: #c5c5ff;
    text-align: center;
    padding: 60px 20px;
}
.sign-wrap-4 .sign_word {
    font-size: 30px;
    font-weight: bold;
    line-height: 50px;
    color: #FFF;
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #BFE2FF, 0 0 0.5em #BFE2FF, 0 0 0.1em #BFE2FF;
}
.sign-wrap-4 .sign_word span {
    animation: neon-4 linear infinite 2s;
}
@keyframes neon-4 {
    78% {
        color: inherit;
        text-shadow: inherit;
    }
    79%{
        color: #0b3960;
    }
    80% {
        text-shadow: none;
    }
    81% {
        color: inherit;
        text-shadow: inherit;
    }
    82% {
        color: #0b3960;
        text-shadow: none;
    }
    83% {
        color: inherit;
        text-shadow: inherit;
    }
    92% {
        color: #0b3960;
        text-shadow: none;
    }
    92.5% {
        color: inherit;
        text-shadow: inherit;
    }
}  
</style>
Красным в коде выделила  размер текста. 
Салатовым — фон.
Голубым — текст.
Можно поменять под свой вкус цвет текста, шрифт. 
Работу кода можно проверить в визуальном редакторе.
С Рождеством Вас!

Ваши комментарии:

Комментарии со спамом удаляются.