Праздничные баннеры и промо-секции часто требуют акцентной анимации. Этот метод позволяет создать эффект падающего разноцветного конфетти на чистом CSS с использованием псевдоэлементов и градиентных паттернов. Решение не нагружает браузер скриптами и аппаратно ускоряется графическим чипом (GPU).
1 Назначение суффикса класса секции
Открой редактор Gridbox, перейди в настройки промо-секции или баннера и в поле Class Suffix укажи:
Class Suffix
confetti-falling2 Добавление стилей анимации (CSS)
Вставь в Инструменты ➝ Редактор кода ➝ CSS:
CSS
/* Ограничивающий контейнер секции */.confetti-falling { position: relative; overflow: hidden;}/* Первый слой разноцветных частиц конфетти */.confetti-falling::before,.confetti-falling::after { content: ""; position: absolute; top: -100%; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 2; background-image: radial-gradient(circle, #ff595e 4px, transparent 5px), radial-gradient(circle, #ffca3a 3px, transparent 4px), radial-gradient(circle, #8ac926 5px, transparent 6px), radial-gradient(circle, #1982c4 4px, transparent 5px), radial-gradient(circle, #6a4c93 3px, transparent 4px); background-size: 260px 260px; background-position: 0 0, 40px 70px, 90px 140px, 160px 30px, 210px 180px; animation: confettiFallAnimation 8s linear infinite; will-change: transform;}/* Второй фоновый слой с другим интервалом и плотностью */.confetti-falling::after { background-size: 340px 340px; background-position: 20px 40px, 70px 110px, 130px 180px, 200px 50px, 280px 220px; animation-duration: 12s; opacity: 0.75;}/* Бесконечное плавное падение */@keyframes confettiFallAnimation { 0% { transform: translateY(0); } 100% { transform: translateY(100%); }}Обрати внимание:
Для изменения цветовой гаммы конфетти под фирменный стиль сайта достаточно заменить HEX-коды цветов (#ff595e, #ffca3a, #8ac926, #1982c4, #6a4c93) в функции radial-gradient.