@casoon/dragonfly/effects/particles/fountain.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.

/**
 * Fountain Partikel-Effekt
 * 
 * Partikel, die wie ein Springbrunnen nach oben schießen und dann herabfallen.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes fountain-shoot {
    0% {
        opacity: var(--opacity-0);
        transform: translateX(0%) scale(1);
    }

    20% {
        opacity: var(--opacity-100);
        transform: translateY(-70px) scale(1);
    }

    40% {
        transform: translateY(-90px) scale(0.9);
    }

    70% {
        opacity: var(--opacity-80);
        transform: translateY(-40px) scale(0.8);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translateX(0%) scale(0.7);
    }
}

@keyframes fountain-shoot-alt {
    0% {
        opacity: var(--opacity-0);
        transform: translateX(0%) translateX(0%) scale(1);
    }

    20% {
        opacity: var(--opacity-100);
        transform: translateY(-60px) translateX(var(--spacing-1)(--spacing-1)) scale(1);
    }

    40% {
        transform: translateY(-80px) translateX(var(--spacing-5)) scale(0.9);
    }

    70% {
        opacity: var(--opacity-80);
        transform: translateY(-30px) translateX(var(--spacing-2-5)) scale(0.8);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translateX(0%) translateX(0%) scale(0.7);
    }
}

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

    .fountain::before,
    .fountain::after {
        animation: fountain-shoot 2.5s var(--easing-decelerate) infinite;
        background: var(--fountain-color, rgb(180 220 255 / 0.8));
        border-radius: 5px;
        bottom: 0%;
        content: '';
        height: var(--spacing-1-5);
        position: absolute;
        width: var(--spacing-1-5);
    }

    .fountain::before {
        left: calc(50% - var(--spacing-1));
    }

    .fountain::after {
        animation-delay: var(--animation-duration-medium);
        animation-name: fountain-shoot-alt;
        left: calc(50% + var(--spacing-1));
    }

    /* Varianten */
    .fountain-sm::before,
    .fountain-sm::after {
        height: var(--spacing-1);
        width: var(--spacing-1);
    }

    .fountain-lg::before,
    .fountain-lg::after {
        height: var(--spacing-2);
        width: var(--spacing-2);
    }

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

    .fountain-fast::before,
    .fountain-fast::after {
        animation-duration: var(--animation-duration-slower);
    }

    /* Mehrere Partikel */
    .fountain-many {
        position: relative;
    }

    .fountain-many::before,
    .fountain-many::after {
        animation: fountain-shoot 2.5s var(--easing-decelerate) infinite;
        background: var(--fountain-color, rgb(180 220 255 / 0.8));
        border-radius: 5px;
        bottom: 0%;
        content: '';
        height: var(--spacing-1-5);
        position: absolute;
        width: var(--spacing-1-5);
    }

    .fountain-many::before {
        animation-delay: var(--animation-duration-slow);
        left: calc(50% - var(--spacing-1)(--spacing-1));
    }

    .fountain-many::after {
        animation-delay: var(--animation-duration-slower);
        animation-name: fountain-shoot-alt;
        left: calc(50% + var(--spacing-1)(--spacing-1));
    }

    /* Farbvarianten */
    .fountain-blue {
        --fountain-color: rgb(100 180 255 / 0.8);
    }

    .fountain-cyan {
        --fountain-color: rgb(100 240 255 / 0.8);
    }

    .fountain-white {
        --fountain-color: rgb(240 240 255 / 0.8);
    }

    .fountain-rainbow::before {
        --fountain-color: rgb(255 100 100 / 0.8);
    }

    .fountain-rainbow::after {
        --fountain-color: rgb(100 255 100 / 0.8);
    }

    .fountain-rainbow.fountain-many::before {
        --fountain-color: rgb(255 255 100 / 0.8);
    }

    .fountain-rainbow.fountain-many::after {
        --fountain-color: rgb(100 100 255 / 0.8);
    }
}

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