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

/**
 * Partikel-Effekte
 * 
 * Diese Datei enthält verschiedene Partikel-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@keyframes particles-float {
    0% {
        opacity: var(--opacity-0);
        transform: translate(0%, 0%);
    }

    50% {
        opacity: var(--opacity-100);
    }

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

@keyframes particles-dots {
    0% {
        opacity: var(--opacity-0);
        transform: translate(0%, 0%);
    }

    50% {
        opacity: var(--opacity-100);
    }

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

@keyframes particles-lines {
    0% {
        opacity: var(--opacity-0);
        transform: translate(0%, 0%) rotate(0deg);
    }

    50% {
        opacity: var(--opacity-100);
    }

    100% {
        opacity: var(--opacity-0);
        transform: translate(100px, 100px) rotate(360deg);
    }
}

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

    .particles::before,
    .particles::after {
        animation: particles-float 3s infinite;
        background: var(--particle-color, rgb(255 255 255 / 50%));
        border-radius: 5px;
        content: '';
        height: var(--spacing-1);
        position: absolute;
        width: var(--spacing-1);
    }

    .particles::after {
        animation-delay: var(--animation-duration-slower);
    }

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

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

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

    .particles-fast::before,
    .particles-fast::after {
        animation-duration: var(--animation-duration-slowest);
    }

    .particles-dots {
        overflow: hidden;
        position: relative;
    }

    .particles-dots::before,
    .particles-dots::after {
        animation: particles-dots 3s infinite;
        background: var(--particle-dots-color, rgb(255 255 255 / 50%));
        border-radius: 5px;
        content: '';
        height: var(--spacing-1);
        position: absolute;
        width: var(--spacing-1);
    }

    .particles-dots::after {
        animation-delay: var(--animation-duration-slower);
    }

    .particles-dots-sm::before,
    .particles-dots-sm::after {
        height: var(--border-width-thick);
        width: var(--border-width-thick);
    }

    .particles-dots-lg::before,
    .particles-dots-lg::after {
        height: var(--spacing-1-5);
        width: var(--spacing-1-5);
    }

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

    .particles-dots-fast::before,
    .particles-dots-fast::after {
        animation-duration: var(--animation-duration-slowest);
    }

    .particles-lines {
        overflow: hidden;
        position: relative;
    }

    .particles-lines::before,
    .particles-lines::after {
        animation: particles-lines 3s infinite;
        background: var(--particle-lines-color, rgb(255 255 255 / 50%));
        content: '';
        height: var(--spacing-5);
        position: absolute;
        width: var(--border-width-thick);
    }

    .particles-lines::after {
        animation-delay: var(--animation-duration-slower);
    }

    .particles-lines-sm::before,
    .particles-lines-sm::after {
        height: var(--spacing-2-5);
        width: var(--border-width);
    }

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

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

    .particles-lines-fast::before,
    .particles-lines-fast::after {
        animation-duration: var(--animation-duration-slowest);
    }

    .particles-color-primary::before,
    .particles-color-primary::after {
        background: var(--particle-primary, rgb(59 130 246 / 50%));
    }

    .particles-color-secondary::before,
    .particles-color-secondary::after {
        background: var(--particle-secondary, rgb(107 114 128 / 50%));
    }

    .particles-color-success::before,
    .particles-color-success::after {
        background: var(--particle-success, rgb(16 185 129 / 50%));
    }

    .particles-color-error::before,
    .particles-color-error::after {
        background: var(--particle-error, rgb(239 68 68 / 50%));
    }

    .particles-color-warning::before,
    .particles-color-warning::after {
        background: var(--particle-warning, rgb(245 158 11 / 50%));
    }

    .particles-color-info::before,
    .particles-color-info::after {
        background: var(--particle-info, rgb(6 182 212 / 50%));
    }
}

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