@casoon/dragonfly
Version:
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.
219 lines (189 loc) • 7.59 kB
CSS
/**
* Neon-Effekte
*
* Diese Datei enthält verschiedene Neon-Effekte für Text und Rahmen.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*
* Verwendung:
*
* 1. Neon-Text:
* <div class="neon-text">Standard Neon-Text</div>
* <div class="neon-text-secondary">Sekundärer Neon-Text</div>
* <div class="neon-text-accent">Akzent Neon-Text</div>
*
* 2. Animation-Varianten:
* <div class="neon-text-slow">Langsame Animation</div>
* <div class="neon-text-fast">Schnelle Animation</div>
* <div class="neon-text-flicker">Flackernder Effekt</div>
* <div class="neon-text-hover">Effekt nur beim Hover</div>
*
* 3. Neon-Rahmen:
* <div class="neon-border">Element mit Neon-Rahmen</div>
*
* 4. Glow-Effekte:
* <div class="glow">Text mit Glow-Effekt in Standard-Farbe</div>
* <span class="glow" style="--glow-color: #0ff;">Text mit türkisem Glow</span>
* <button class="glow-button">Button mit Glow-Effekt</button>
* <button class="glow-button" style="--glow-button-color: #ff00ff;">Button mit pinkem Glow</button>
*
* 5. Flacker-Effekte:
* <div class="flicker-element">Element mit Flacker-Animation</div>
* <div class="flicker-fast">Schnell flackerndes Element</div>
* <div class="flicker-slow">Langsam flackerndes Element</div>
*
* Technische Details:
* - Verwendet CSS-Variablen für Farben
* - Optimiert mit will-change
* - Responsive Anpassungen für mobile Geräte
* - Reduzierte Bewegung wird berücksichtigt
*
* Performance-Hinweise:
* - Die Effekte sind hardware-beschleunigt
* - Animationen werden auf mobilen Geräten reduziert
* - Reduzierte Bewegung wird automatisch berücksichtigt
*/
/* Animationen - immer außerhalb von @layer definieren */
@keyframes neon-pulse {
from {
opacity: var(--opacity-100);
}
to {
opacity: var(--opacity-70);
}
}
@keyframes neon-flicker {
0, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-10) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-20) currentcolor;
}
20, 24%, 55% {
text-shadow: var(--display-none);
}
}
@keyframes flicker {
0, 100% { opacity: var(--opacity-100); }
30% { opacity: var(--opacity-70); }
50% { opacity: var(--opacity-100); }
70% { opacity: var(--opacity-80); }
90% { opacity: var(--opacity-50); }
}
/* Effekte-Definitionen in Layer */
@layer effects {
/* Neon Text */
.neon-text {
animation: neon-pulse 1.5s var(--easing-smooth) infinite alternate;
color: var(--theme-primary-500);
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-primary-500);
}
.neon-text-secondary {
color: var(--theme-secondary-500);
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-secondary-500);
}
.neon-text-accent {
color: var(--theme-accent-500);
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-accent-500);
}
/* Neon Border */
.neon-border {
animation: neon-pulse 1.5s var(--easing-smooth) infinite alternate;
border: var(--spacing-2) solid var(--theme-primary-500);
box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-primary-500);
}
.neon-border-secondary {
border: var(--spacing-2) solid var(--theme-secondary-500);
box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-secondary-500);
}
.neon-border-accent {
border: var(--spacing-2) solid var(--theme-accent-500);
box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-accent-500);
}
/* Animation Variants */
.neon-text-slow {
animation: neon-pulse 4s var(--easing-smooth) infinite;
}
.neon-text-fast {
animation: neon-pulse 1s var(--easing-smooth) infinite;
}
.neon-text-flicker {
animation: neon-flicker 2s var(--easing-smooth) infinite;
}
.neon-text-hover {
transition: var(--transition-shadow);
}
.neon-text-hover:hover {
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-10) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-20) currentcolor;
}
/* Zusätzliche Glow-Effekte */
.glow {
color: var(--glow-color, var(--theme-info-500));
text-shadow:
0 0 var(--spacing-1) var(--glow-color, var(--theme-info-500)),
0 0 var(--spacing-2) var(--glow-color, var(--theme-info-500)),
0 0 var(--spacing-1)(--border-width-thick) var(--glow-color, var(--theme-info-500)),
0 0 var(--spacing-4) var(--glow-color, var(--theme-info-500));
}
.glow-button {
box-shadow:
0 0 var(--spacing-2) var(--glow-button-color, var(--theme-accent-500)),
0 0 var(--spacing-1)(--spacing-1) var(--glow-button-color, var(--theme-accent-500)),
0 0 var(--spacing-5) var(--glow-button-color, var(--theme-accent-500)),
0 0 30px var(--glow-button-color, var(--theme-accent-500));
position: relative;
z-index: var(--z-index-1);
}
.flicker-element {
animation: flicker 4s infinite;
}
.flicker-fast {
animation: flicker 2s infinite;
}
.flicker-slow {
animation: flicker 8s infinite;
}
}
/* Barrierefreiheit-Anpassungen */
@layer utilities {
/* Reduced Motion */
@container root (prefers-reduced-motion: reduce) {
.neon-text,
.neon-border,
.flicker-element,
.flicker-fast,
.flicker-slow {
animation: var(--animation-none);
transition: var(--transition-none);
}
}
}
/* Responsive Anpassungen */
@media (max-width: 640px) {
@layer effects {
.neon-sign {
font-size: 1.5rem;
padding: 0.5rem var(--spacing-4);
}
.neon-border {
border-width: var(--border-width-thick);
}
.neon-box {
aspect-ratio: 16/9;
height: auto;
width: 100%;
}
}
}