Комната заполняется новым свечением: всё вокруг начинает двигаться. Текст дрожит, мерцает. Экран уже не просто плоский — он оживает.
Пришло время вдохнуть жизнь в интерфейс. Сделать так, чтобы каждый элемент дышал, словно часть живого организма в твоей цифровой вселенной.
У тебя отлично получается. В этом уроке мы усилим атмосферу за счет разных анимаций. Мы подправим немного верстку, добавим персонажа и анимации для текста и персонажа. Материалы к уроку можешь скачать по ссылке:
Цель этого урока: добавить визуальную динамику — анимации текста и плавные эффекты.
Что ты изучишь: CSS-анимации, псевдоклассы, плавные переходы (transitions), настройку эффекта появления текста.
На выходе: интерфейс, который "дышит" — текст оживает, создавая более глубокое погружение в атмосферу.
Часть 1: transition — плавные изменения
Что делает transition?
Позволяет плавно анимировать изменение свойства (цвета, размера, тени и т.д.).
Синтаксис:
transition: свойство время функция-затухания задержка;Пример 1: плавное изменение цвета ссылки при наведении
В стилях уже есть цвет который меняется при наведении курсора мыши.
.cyberpunk a:hover {
color: #ff00cc;
}Давай добавим плавность: пусть ссылка не меняет цвет резко, а мягко переливается.
.cyberpunk a {
transition: color 0.4s ease;
}Теперь ссылка не «прыгает» цветом, а медленно перетекает из одного в другой.
Часть 2: @keyframes и animation — задаём собственные анимации
Что делает @keyframes?
Позволяет анимировать любое свойство по временной шкале (например, от 0% до 100%).
Синтаксис:
@keyframes имя {
0% { ... }
50% { ... }
100% { ... }
}Созданную анимацию теперь можно применить к селектору через свойство animation.
.элемент {
animation: имя 2s infinite;
}Пример 2: мигание заголовка
@keyframes neonColor {
0% { color: #00fff7; }
50% { color: #ff00cc; }
100% { color: #00fff7; }
}
.cyberpunk h1 {
animation: neonColor 10s infinite;
}Данный код создает анимацию с именем neonColor и затем мы применяем ее на заголовке h1. Каждые 10 секунд цвет текста плавно меняется туда и обратно бесконечно.
Часть 3: Усиляем атмосферу. Добавляем анимацию появления текста.
Создадим анимацию появления всего блока cyberpunk. Для начала изменим его местоположение на экране и чуть подправим цвет фона блока и прозрачность.
/\* Основной контейнер с текстом \*/
.cyberpunk {
font-family: sans-serif; /\* Меняем шрифт на простой и современный, чтобы текст был читаемым \*/
text-align: center; /\* Выравниваем текст по центру \*/
position: absolute; /\* "Вырываем" контейнер из обычного потока страницы, чтобы точно его разместить \*/
top: 300px; /\* Прижимаем контейнер на 100px снизу от экрана \*/
left: 100px; /\* Прижимаем контейнер на 100px слева от экрана \*/
width: 50%; /\* Ширина контейнера — на половину экрана по горизонтали \*/
background: rgba(7, 17, 25, 0.90); /\* Темный фон с прозрачностью, чтобы текст выделялся на фоне \*/
padding: 20px; /\* Внутренние отступы, чтобы текст не прилипал к краям \*/
color: #00fff7; /\* Цвет текста — яркий бирюзовый, соответствующий неоновой стилистике \*/
}Блок вместо отступа bottom изменили на top, размер блока width стал 50% от ширины экрана. Цвет фона изменился. Линию border-top удалили. Будем делать неоновую обводку вокруг всего контейнера.
Теперь добавим неоновую обводку и анимацию изменения обводки.
Создаем анимацию изменения цвета обводки:
@keyframes neonFlicker {
0% { border-color: #00fff7; box-shadow: 0 0 50px #00fff7, 0 0 20px #00fff7; }
50% { border-color: #ff00cc; box-shadow: 0 0 25px #ff00cc, 0 0 28px #ff00cc; }
100% { border-color: #00fff7; box-shadow: 0 0 50px #00fff7, 0 0 20px #00fff7; }
}Теперь в наш селектор cyberpunk можно добавить свойство с анимацией. Ставим 10s чтобы неоновая обводка синхронизирована меняла цвет вместе с изменением заголовка.
.cyberpunk {
animation: neonFlicker 10s infinite ease;
}Теперь добавим плавную анимацию появления всего блока. Если у нас используется всего два шага анимации 0% и 100%, то можно написать так:
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}Анимация будет изменять положение по оси Y на 20 пикселей и менять прозрачность блока с 0 до 100%. Добавим нашу анимацию к нашему блоку. Анимации можно указывать через запятую.
.cyberpunk {
animation: neonFlicker 10s infinite ease, fadeIn 3s ease-out forwards;
}Сделаем ссылки похожими на кнопки. Добавим им рамку и поведение при наведении.
.cyberpunk a {
display: inline-block;
margin-top: 16px;
padding: 10px 20px;
color: #00fff7;
text-decoration: none;
font-weight: bold;
border: 2px solid #00fff7;
transition: all 0.5s ease;
}
.cyberpunk a:hover {
background-color: #ff00cc;
color: #000;
border-color: #ff00cc;
}И на закуску пришло время добавить персонажа. Для этого рядом с нашим основным блоком cyberpunk в index файле добавь новую верстку.
<div class="character">
<img src="img/character.png">
</div>Изображения персонажей ты найдешь в дополнительных материалах к уроку. Просто скопируй их в директорию img.
Идентичный блок с персонажем добавь в файлы login и disconnect. Единственное отличие в каждом файле будет свое изображение персонажа.
character для index.html
character2 для disconnect.html
character3 для login.html
Анимация для появления персонажа выглядит так
@keyframes fadeInCharacter {
from { opacity: 0; transform: translateX(-200px); }
to { opacity: 1; transform: translateX(0); }
}А также зададим позиционирование персонажа на экране.
.character {
position: absolute;
bottom: -800px;
right: 100px;
width: 50%;
animation: fadeInCharacter 0.2s ease-out forwards;
}Чтобы изображения персонажей не выезжали за ширину браузера, надо добавить в тег body дополнительные свойства и значения.
position: relative;
overflow: hidden;И вот он — первый обитатель твоего цифрового мира. Не просто текст, не просто кнопка. А кто-то, кто смотрит прямо на игрока. Ты создаёшь не просто игру. Ты строишь реальность, которая реагирует, дышит, ждёт следующего выбора.
Твой интерфейс превратился в живую сущность. Он мигает, дышит, говорит. С каждым уроком ты всё ближе к цифровой легенде, которую создаёшь своими руками.
В следующем уроке мы добавим звуки и еще больше усилим атмосферу нашей игры. Это уже сильный фундамент для создания полноценной визуальной новеллы в жанре киберпанк.
Иллюстрации из урока
Книга по JavaScript для начинающих
«JavaScript с нуля: учимся программировать, создавая игры»Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.
Читать книгу на ЛитРес →