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