Как пользоваться: Падающие звёзды
- Предпросмотр начинается с режима Метеоры. Параметр Пауза между задаёт, как редко появляется каждый метеор.
- Длину хвоста задайте параметром Размер, а угол — параметром Ветер.
- Выберите Падающие звёзды, чтобы получить фигурки звёзд, которые плавно падают и вращаются.
- Скопируйте код в тёмный раздел страницы.
Метеоры на одном ключевом кадре
Метеор — это тонкая градиентная полоса: прозрачный хвост и яркая светящаяся головка, повёрнутая по направлению движения. Ключевой кадр перемещает её через блок в первой части цикла, а в остальное время звезда скрыта. Так каждый метеор вспыхивает, пролетает и ждёт своей очереди, а разные задержки распределяют их по небу.
Другие эффекты есть в генераторе анимации частиц.
Также ищут как: метеор css, анимация падающей звезды css, анимация метеоров css, анимация ночного неба css, анимация звёзд css.
Инструменты, которые хорошо сочетаются с Падающие звёзды
- CSS-снег — Устройте на своём сайте снегопад к праздникам: мягкий снег или снежинки, лёгкая поземка или метель.
- CSS-анимация дождя — Добавьте дождь на страницу или в главный блок — от лёгкой мороси до косого ливня.
- CSS-конфетти — Отпразднуйте запуск, регистрацию или день рождения падающим конфетти, которое плавно кружится и переворачивается в разных цветах.
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
Часто задаваемые вопросы
Как сделать анимацию падающей звезды в CSS?
Анимируйте тонкую градиентную линию по диагонали экрана, повёрнутую по направлению движения, в первой части ключевого кадра, а в остальное время держите её за пределами экрана. Выберите здесь режим «Метеоры» и скопируйте код.
Как сделать их реже?
Увеличьте значение «Пауза между» и уменьшите «Сколько».
Можно ли использовать свою картинку звезды?
Да: выберите «Мой SVG / изображение» и загрузите файл или выберите «Эмодзи» и введите символ звезды.
Можно ли установить Падающие звёзды как веб-приложение и пользоваться им офлайн?
Да. Падающие звёзды — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.