Как пользоваться: Генератор анимации частиц
- Выберите эффект и нажмите + Add layer, чтобы добавить ещё слои (например, снег и падающие звёзды). Слой удаляется кнопкой ×. Эффекты: снег, снежинки, дождь, падающие звёзды, звёзды, конфетти, лепестки, листья, сердечки, пузырьки — или My SVG / image, чтобы загрузить свой файл, либо Emoji.
- Настройте количество, размер, скорость, ветер и покачивание. Pause between заставляет частицы появляться время от времени, как падающие звёзды.
- Выберите, будет ли эффект занимать всю страницу (фиксированный слой поверх) или один раздел.
- Скопируйте HTML + CSS (без JavaScript) или более короткую версию на JavaScript, либо скачайте демо-страницу.
Как работает анимация
Каждая частица — это элемент <i> с собственным размером, начальной позицией, длительностью и задержкой, которые хранятся в пользовательских свойствах CSS. Одно правило @keyframes перемещает её от верхнего края до нижнего; внутренний элемент <b> покачивается из стороны в сторону и вращается. Анимируется только transform, поэтому браузер выполняет её на GPU без пересчёта верстки страницы.
.dp-fall { position: fixed; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.dp-fall i { position: absolute; top: 0; animation: dp-fall var(--d) linear var(--t) infinite; }
@keyframes dp-fall { to { transform: translate(var(--dx), calc(100cqh + var(--s) * 3)); } }Отрицательные задержки запускают каждую частицу с середины её падения, поэтому экран уже заполнен к моменту загрузки страницы. pointer-events: none пропускает клики сквозь эффект, а prefers-reduced-motion скрывает его для посетителей, которые отключили анимации.
Использование своего SVG
Выберите My SVG / image и загрузите небольшой SVG, PNG, WebP или GIF — логотип, снежинку, монетку. Файл встраивается в CSS как data URI, поэтому фрагменту по-прежнему не нужны дополнительные файлы. Встроенные фигуры рисуются с помощью CSS-маски, поэтому Mixed colors может перекрасить каждую из них.
Также вам may пригодиться: CSS Keyframes Generator, CSS Animation Generator, SVG Blob Generator.
Также ищут как: анимация падающего снега css, эффект снега css, css анимация дождя, падающие звёзды css, анимация конфетти css, эффект частиц css, падающий svg анимация, particle animation generator.
Инструменты, которые хорошо сочетаются с Генератор анимации частиц
- Генератор SVG-волн — Создавайте волнистые разделители секций для лендингов: добавляйте и удаляйте волны (до 6, у каждой свой цвет, прозрачность и форма), задавайте количество гребней, высоту и плавность, выбирайте цвета и то, где будет волна: сверху или снизу.
- Генератор CSS-лоадеров — Выберите один из 13 спиннеров на чистом CSS, настройте размер, цвета, толщину и скорость и скопируйте лёгкий доступный HTML и CSS — без изображений, SVG и JavaScript.
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Генератор CSS-анимаций при наведении — Создавайте анимации при наведении для кнопок, карточек, ссылок и иконок.