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

/**
 * Links Partikel-Effekt
 * 
 * Partikel, die durch Linien miteinander verbunden sind – erzeugt ein Netz- oder Molekül-Design.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes links-node-1 {
    0%, 100% {
        transform: translate(0%, 0%);
    }

    25% {
        transform: translate(var(--spacing-5), calc(-1 * var(--spacing-2-5)));
    }

    50% {
        transform: translate(40px, 0%);
    }

    75% {
        transform: translate(var(--spacing-5), var(--spacing-2-5));
    }
}

@keyframes links-node-2 {
    0%, 100% {
        transform: translate(0%, 0%);
    }

    25% {
        transform: translate(calc(-1 * var(--spacing-2-5)), var(--spacing-5));
    }

    50% {
        transform: translate(0%, 40px);
    }

    75% {
        transform: translate(var(--spacing-2-5), var(--spacing-5));
    }
}

@keyframes links-node-3 {
    0%, 100% {
        transform: translate(0%, 0%);
    }

    25% {
        transform: translate(-var(--spacing-5), calc(-1 * var(--spacing-2-5)));
    }

    50% {
        transform: translate(-40px, 0%);
    }

    75% {
        transform: translate(calc(-1 * var(--spacing-5)), var(--spacing-2-5));
    }
}

@layer components {
    .links {
        min-height: var(--spacing-25);
        min-width: var(--spacing-25);
        position: relative;
    }

    .links::before,
    .links::after,
    .links .node {
        background: var(--links-node-color, rgb(80 120 255));
        border-radius: 5px;
        content: '';
        height: var(--spacing-2);
        position: absolute;
        width: var(--spacing-2);
    }

    .links::before {
        animation: links-node-1 8s infinite var(--easing-smooth);
        left: 3%0%;
        top: 3%0%;
    }

    .links::after {
        animation: links-node-2 8s infinite var(--easing-smooth);
        left: 5%0%;
        top: 5%0%;
    }

    .links .node {
        animation: links-node-3 8s infinite var(--easing-smooth);
        left: 7%0%;
        top: 3%0%;
    }

    /* Verbindungslinien zwischen den Knoten */
    .links {
        background:
            linear-gradient(
                to bottom right,
                transparent calc(50% - var(--border-width)),
                var(--links-line-color, rgb(80 120 255 / 0.6)) calc(50%),
                transparent calc(50% + var(--border-width))
            ),
            linear-gradient(
                to bottom left,
                transparent calc(50% - var(--border-width)),
                var(--links-line-color, rgb(80 120 255 / 0.6)) calc(50%),
                transparent calc(50% + var(--border-width))
            );
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100;
    }

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

    .links-lg::before,
    .links-lg::after,
    .links-lg .node {
        height: var(--spacing-1)(--border-width-thick);
        width: var(--spacing-1)(--border-width-thick);
    }

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

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

    /* Farb-Varianten */
    .links-blue {
        --links-node-color: rgb(30 144 255);
        --links-line-color: rgb(30 144 255 / 0.6);
    }

    .links-green {
        --links-node-color: rgb(46 204 113);
        --links-line-color: rgb(46 204 113 / 0.6);
    }

    .links-purple {
        --links-node-color: rgb(155 89 182);
        --links-line-color: rgb(155 89 182 / 0.6);
    }

    .links-teal {
        --links-node-color: rgb(26 188 156);
        --links-line-color: rgb(26 188 156 / 0.6);
    }

    .links-orange {
        --links-node-color: rgb(230 126 34);
        --links-line-color: rgb(230 126 34 / 0.6);
    }
}

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