В прошлый раз в рубрике CSS мы публиковали урок «Создание анимированной неоновой вывески с использованием CSS». Сегодня мы продолжим эту тему и расскажем, как анимировать подобную неоновую вывеску. Используйте этот эффект для вашей типографики и других графических элементов.

Основной код в этом уроке очень похож на код в уроках: встроенный шрифт, тени текста и фоновое изображение:

h1#neon-tubing {
        padding: 6rem;
        text-align: center;
        color: #fee
        font-family: Neon80s, sans-serif;
        font-size: 11rem;
        letter-spacing: 2rem;
        background: url(brick-wall-texture-faded.jpg);
        background-size: cover;
}

Но есть два важных отличия от предыдущего кода. Во-первых, одна буква неоновой вывески находится в элементе span:

<h1 id="neon-tubing">B<span>A</span>R</h1>

Во-вторых, есть последовательность ключевых кадров анимации CSS, для экономии места записанная без приставок производителей, которые в этом случае почти нигде и не понадобятся для большинства современных версий браузеров:

@keyframes neonspark {
        0% {
                text-shadow: none;
        }
        30% {
                text-shadow: 0 0 30px rgba(255,0,84,0.6);
        }
        60% {
                text-shadow: 0 0 30px rgba(255,0,84,0.6),
                  0 0 60px rgba(255,0,84,0.4);
        }
        80% {
                text-shadow: none;
        }
        100% {
                text-shadow: 0 0 30px rgba(255,0,84,0.6),
                 0 0 60px rgba(255,0,84,0.4),
                 0 0 100px rgba(255,0,84,0.2),
                 0 0 90px rgba(255,0,84,0.1);
        }
}

Последовательность простая, она только добавляет и убирает тени текста у букв. Хитрость в том, что элемент заголовка и span используют ключевые кадры по-разному:

h1#neon-tubing {
        animation: neonspark 1s 3s forwards;
        }
h1#neon-tubing span {
                animation: neonspark 4s 3s infinite;
        }

В результате получается эффект, в котором знак целиком загорается один раз, так как такое поведение анимаций CSS по умолчанию,  а элемент span использует ту же последовательность повторно, мигая буквой «А» в неоновой вывеске вечно:

Этот пример показывает гибкость и разносторонность использования ключевых кадров CSS: как и классы элементов, хорошо продуманные ключевые кадры могут быть применены различными способами к разным элементам на веб-страницах.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание трехмерного вытянутого текста с использованием CSS
• Интересный эффект выделения текста с использованием псевдоэлемента CSS выделения
• Создание всплывающих подсказок с использованием CSS