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

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

@keyframes shine-effect {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

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

    .shine::after {
        animation: shine-effect 3s infinite;
        background: linear-gradient(
            45deg,
            transparent,
            rgb(255 255 255 / 10%),
            transparent
        );
        content: '';
        height: 200%;
        left: -50%;
        position: absolute;
        top: -50%;
        transform: var(--transform-rotate-45deg);
        width: 200%;
    }

    .shine-hover:hover::after {
        animation: shine-effect 1s;
    }

    .shine-strong::after {
        background: linear-gradient(
            45deg,
            transparent,
            rgb(255 255 255 / 30%),
            transparent
        );
    }

    .shine-soft::after {
        background: linear-gradient(
            45deg,
            transparent,
            rgb(255 255 255 / 5%),
            transparent
        );
    }

    .shine-color::after {
        background: linear-gradient(
            45deg,
            transparent,
            var(--shine-color, rgb(255 255 255 / 20%)),
            transparent
        );
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .shine::after,
        .shine-hover:hover::after,
        .shine-strong::after,
        .shine-soft::after,
        .shine-color::after {
            animation: var(--animation-none);
        }
    }
}