Мастерская: анимированный звездопад на чистом CSS
Начинаем с базовой структуры HTML, которая включает объявление документа, заголовок и подключение CSS-файла. Контейнер, в котором расположены все звёзды — .sky-container. Отдельные звёзды разметим с помощью span с классом star.
Задаём для body фоновый градиент и центрируем содержимое по вертикали и горизонтали.
Добавляем стиль для контейнера, чтобы он занимал всю высоту экрана и был абсолютно позиционирован.
Добавляем стиль для звезды, устанавливая ее позицию и размеры, а также добавляя эффект тени.
Добавляем псевдоэлементы ::before и ::after для создания лучей звезды.
Поворачиваем ::after, чтобы завершить лучи.
Модифицируем псевдоэлементы, добавляя градиентный фон, чтобы создать эффект сияния и сделать их более привлекательными.
Такой же градиентный фон задаём хвосту звезды.
Делаем ширину псевдоэлементов нулевой и добавляем им анимацию, чтобы они изменяли свою ширину.
Создаем анимацию shining, которая изменяет ширину псевдоэлементов от 0 до 30 пикселей, создавая эффект мерцания.
Добавляем анимацию для хвоста звезды, чтобы он изменял свою ширину от 0 до 100 пикселей.
Добавляем анимацию shooting, которая перемещает звезду по горизонтали, создавая эффект движения. Эта анимация будет работать одновременно с анимацией tail.
Добавляем в разметку ещё несколько звёзд. Пока их не видно, так как они все расположены в одном месте и анимируются одновременно.
Задаём собственные координаты и задержку анимации для первой звезды.
Задаём собственные координаты и задержку анимации для второй звезды.
Задаём собственные координаты и задержку анимации для остальных звёзд.
Осталось повернуть контейнер неба на 45 градусов, чтобы звёзды падали по диагонали. Также можно добавить контейнер с overflow: hidden;, чтобы обрезать углы, появившиеся после поворота, и избавитья от полос прокрутки.
Эффект анимированных падающих звёзд завершён.
Поэкспериментируйте с кодом самостоятельно: меняйте количество звёзд, их расположение, цвет, параметры анимации и делитесь с друзьями.
