Анимированная мигающая неоновая вывеска с использованием CSS
18 ноября 2016 | Опубликовано в css | 1 Комментарий »
В прошлый раз в рубрике 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: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191