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

/**
 * Triangles Partikel-Effekt
 * 
 * Dreieckige Partikel mit geometrischen Bewegungen – für moderne, abstrakte Designs.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

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

    20% {
        opacity: var(--opacity-100);
        transform: translate(var(--spacing-5), calc(-1 * var(--spacing-5))) rotate(30deg);
    }

    50% {
        transform: translate(50px, calc(-1 * var(--spacing-2-5))) rotate(90deg);
    }

    80% {
        opacity: var(--opacity-100);
        transform: translate(80px, calc(-1 * var(--spacing-5))) rotate(150deg);
    }

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

@keyframes triangles-float-alt {
    0% {
        opacity: var(--opacity-0);
        transform: translate(0%, 0%) rotate(0deg);
    }

    20% {
        opacity: var(--opacity-100);
        transform: translate(-var(--spacing-5), calc(-1 * var(--spacing-5))) rotate(-30deg);
    }

    50% {
        transform: translate(-50px, calc(-1 * var(--spacing-2-5))) rotate(-90deg);
    }

    80% {
        opacity: var(--opacity-100);
        transform: translate(-80px, calc(-1 * var(--spacing-5))) rotate(-150deg);
    }

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

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

    .triangles::before,
    .triangles::after {
        animation: triangles-float 8s var(--easing-smooth) infinite;
        background: var(--triangles-color, rgb(120 90 255 / 70%));
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        content: '';
        height: var(--spacing-1)(--spacing-1);
        position: absolute;
        width: var(--spacing-1)(--spacing-1);
    }

    .triangles::before {
        left: 3%0%;
        top: 3%0%;
    }

    .triangles::after {
        animation-delay: var(--animation-duration-slowest);
        animation-name: triangles-float-alt;
        left: 6%0%;
        top: 5%0%;
    }

    /* Viele Dreiecke */
    .triangles-many {
        position: relative;
    }

    .triangles-many::before,
    .triangles-many::after {
        animation: triangles-float 8s var(--easing-smooth) infinite;
        background: var(--triangles-color, rgb(120 90 255 / 70%));
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        content: '';
        height: var(--spacing-1)(--spacing-1);
        position: absolute;
        width: var(--spacing-1)(--spacing-1);
    }

    .triangles-many::before {
        animation-delay: var(--animation-duration-slow);
        left: 2%0%;
        top: 4%0%;
    }

    .triangles-many::after {
        animation-delay: var(--animation-duration-ultra-slow);
        animation-name: triangles-float-alt;
        left: 7%0%;
        top: 6%0%;
    }

    .triangles-many .triangle {
        animation: triangles-float 8s var(--easing-smooth) infinite;
        animation-delay: var(--animation-duration-slower);
        background: var(--triangles-color, rgb(120 90 255 / 70%));
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        height: var(--spacing-1)(--spacing-1);
        left: 5%0%;
        position: absolute;
        top: 2%0%;
        width: var(--spacing-1)(--spacing-1);
    }

    .triangles-many .triangle-alt {
        animation: triangles-float-alt 8s var(--easing-smooth) infinite;
        animation-delay: 3.5s;
        background: var(--triangles-color, rgb(120 90 255 / 70%));
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        height: var(--spacing-1)(--spacing-1);
        left: 4%0%;
        position: absolute;
        top: 7%0%;
        width: var(--spacing-1)(--spacing-1);
    }

    /* Größenvarianten */
    .triangles-sm::before,
    .triangles-sm::after,
    .triangles-sm .triangle,
    .triangles-sm .triangle-alt {
        height: var(--spacing-2-5);
        width: var(--spacing-2-5);
    }

    .triangles-lg::before,
    .triangles-lg::after,
    .triangles-lg .triangle,
    .triangles-lg .triangle-alt {
        height: var(--spacing-5);
        width: var(--spacing-5);
    }

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

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

    /* Farbvarianten */
    .triangles-purple {
        --triangles-color: rgb(120 90 255 / 70%);
    }

    .triangles-blue {
        --triangles-color: rgb(90 150 255 / 70%);
    }

    .triangles-teal {
        --triangles-color: rgb(90 220 220 / 70%);
    }

    .triangles-pink {
        --triangles-color: rgb(255 120 220 / 70%);
    }

    .triangles-orange {
        --triangles-color: rgb(255 150 90 / 70%);
    }

    /* Verschiedene Formen */
    .triangles-inverted::before,
    .triangles-inverted::after,
    .triangles-inverted .triangle,
    .triangles-inverted .triangle-alt {
        clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    }

    .triangles-right::before,
    .triangles-right::after,
    .triangles-right .triangle,
    .triangles-right .triangle-alt {
        clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
    }

    .triangles-left::before,
    .triangles-left::after,
    .triangles-left .triangle,
    .triangles-left .triangle-alt {
        clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
    }
}

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