@casoon/dragonfly/effects/particles/bubbles.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Bubbles Partikel-Effekt
 * 
 * Blasenartige Partikel, die aufsteigen – ideal für Wasser- oder Seifenblasen-Effekte.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes bubbles-rise {
    0% {
        opacity: var(--opacity-0);
        transform: translate(0%, 100%);
    }

    20% {
        opacity: var(--opacity-80);
    }

    80% {
        opacity: var(--opacity-60);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translate(var(--bubbles-drift, 30px), -100%);
    }
}

@layer components {
    .bubbles {
        overflow: hidden;
        position: relative;
    }

    .bubbles::before,
    .bubbles::after {
        animation: bubbles-rise 6s infinite;
        background: var(--bubbles-color, rgb(255 255 255 / 0.4));
        border-radius: 5px;
        bottom: calc(-1 * var(--spacing-5));
        content: '';
        height: var(--spacing-5);
        position: absolute;
        width: var(--spacing-5);
    }

    .bubbles::before {
        left: 2%0%;
    }

    .bubbles::after {
        animation-delay: var(--animation-duration-slowest);
        left: 6%0%;
    }

    .bubbles-sm::before,
    .bubbles-sm::after {
        height: var(--spacing-1)(--border-width-thick);
        width: var(--spacing-1)(--border-width-thick);
    }

    .bubbles-lg::before,
    .bubbles-lg::after {
        height: var(--spacing-7-5);
        width: var(--spacing-7-5);
    }

    .bubbles-slow::before,
    .bubbles-slow::after {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    .bubbles-fast::before,
    .bubbles-fast::after {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    .bubbles-many::before {
        animation-delay: var(--animation-duration-slow);
        left: 3%0%;
    }

    .bubbles-many::after {
        animation-delay: var(--animation-duration-ultra-slow);
        left: 7%0%;
    }

    .bubbles-color-primary::before,
    .bubbles-color-primary::after {
        background: var(--bubbles-primary, rgb(59 130 246 / 0.4));
    }

    .bubbles-color-secondary::before,
    .bubbles-color-secondary::after {
        background: var(--bubbles-secondary, rgb(107 114 128 / 0.4));
    }

    .bubbles-color-success::before,
    .bubbles-color-success::after {
        background: var(--bubbles-success, rgb(16 185 129 / 0.4));
    }

    .bubbles-color-error::before,
    .bubbles-color-error::after {
        background: var(--bubbles-error, rgb(239 68 68 / 0.4));
    }

    .bubbles-color-warning::before,
    .bubbles-color-warning::after {
        background: var(--bubbles-warning, rgb(245 158 11 / 0.4));
    }

    .bubbles-color-info::before,
    .bubbles-color-info::after {
        background: var(--bubbles-info, rgb(6 182 212 / 0.4));
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .bubbles::before,
        .bubbles::after {
            animation: var(--animation-none);
            opacity: var(--opacity-0);
        }
    }
}