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

/**
 * Snow Partikel-Effekt
 * 
 * Herabfallende Schneeflocken – ideal für winterliche Szenarien.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes snow-fall-1 {
    0% {
        opacity: var(--opacity-0);
        transform: translateY(calc(-1% * var(--spacing-5))) translateX(0%);
    }

    20% {
        opacity: var(--opacity-100);
        transform: translateX(0%) translateX(var(--spacing-2-5));
    }

    40% {
        transform: translateY(var(--spacing-5)) translateX(0%);
    }

    60% {
        transform: translateY(40px) translateX(calc(-1 * var(--spacing-2-5)));
    }

    80% {
        transform: translateY(60px) translateX(0%);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translateY(80px) translateX(var(--spacing-2-5));
    }
}

@keyframes snow-fall-2 {
    0% {
        opacity: var(--opacity-0);
        transform: translateY(calc(-1% * var(--spacing-5))) translateX(0%);
    }

    20% {
        opacity: var(--opacity-100);
        transform: translateX(0%) translateX(calc(-1 * var(--spacing-2-5)));
    }

    40% {
        transform: translateY(var(--spacing-5)) translateX(0%);
    }

    60% {
        transform: translateY(40px) translateX(var(--spacing-2-5));
    }

    80% {
        transform: translateY(60px) translateX(0%);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translateY(80px) translateX(calc(-1 * var(--spacing-2-5)));
    }
}

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

    .snow::before,
    .snow::after {
        animation: snow-fall-1 6s linear infinite;
        background: var(--snow-color, rgb(255 255 255 / 90%));
        border-radius: 5px;
        content: '';
        height: var(--spacing-1-5);
        position: absolute;
        top: -6px;
        width: var(--spacing-1-5);
    }

    .snow::before {
        left: 3%0%;
    }

    .snow::after {
        animation-delay: var(--animation-duration-slowest);
        animation-name: snow-fall-2;
        left: 6%0%;
    }

    /* Snow mit mehreren Flocken */
    .snow-many {
        position: relative;
    }

    .snow-many::before,
    .snow-many::after {
        animation: snow-fall-1 6s linear infinite;
        background: var(--snow-color, rgb(255 255 255 / 90%));
        border-radius: 5px;
        content: '';
        height: var(--spacing-1-5);
        position: absolute;
        top: -6px;
        width: var(--spacing-1-5);
    }

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

    .snow-many::after {
        animation-delay: var(--animation-duration-ultra-slow);
        animation-name: snow-fall-2;
        left: 5%0%;
    }

    .snow-many .flake {
        animation: snow-fall-1 6s linear infinite;
        animation-delay: var(--animation-duration-medium);
        background: var(--snow-color, rgb(255 255 255 / 90%));
        border-radius: 5px;
        height: var(--spacing-1-5);
        left: 7%0%;
        position: absolute;
        top: -6px;
        width: var(--spacing-1-5);
    }

    .snow-many .flake-alt {
        animation: snow-fall-2 6s linear infinite;
        animation-delay: var(--animation-duration-slower);
        background: var(--snow-color, rgb(255 255 255 / 90%));
        border-radius: 5px;
        height: var(--spacing-1-5);
        left: 9%0%;
        position: absolute;
        top: -6px;
        width: var(--spacing-1-5);
    }

    /* Größenvarianten */
    .snow-sm::before,
    .snow-sm::after,
    .snow-sm .flake,
    .snow-sm .flake-alt {
        height: var(--spacing-1);
        width: var(--spacing-1);
    }

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

    /* Geschwindigkeitsvarianten */
    .snow-slow::before,
    .snow-slow::after,
    .snow-slow .flake,
    .snow-slow .flake-alt {
        animation-duration: var(--animation-duration-ultra-slow);
    }

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

    /* Farb-Varianten */
    .snow-blue {
        --snow-color: rgb(230 240 255 / 90%);
    }

    .snow-silver {
        --snow-color: rgb(220 220 230 / 90%);
    }

    .snow-crystal {
        --snow-color: rgb(240 255 255 / 90%);
    }

    /* Schneekristalle statt runder Flocken */
    .snow-crystal::before,
    .snow-crystal::after,
    .snow-crystal .flake,
    .snow-crystal .flake-alt {
        clip-path: polygon(
            50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 
            50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
        );
        height: var(--spacing-2-5);
        width: var(--spacing-2-5);
    }
}

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