feat: Hintergrund-Animation 'Background Grey Wave' als Fullscreen-Layer
Lottie-Animation fixed hinter allen Inhalten, 100vw/100vh skaliert. Header mit Glassmorphism-Effekt (backdrop-filter blur) damit Inhalt beim Scrollen lesbar bleibt. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
23
style.css
23
style.css
@@ -9,8 +9,24 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#lottie-bg {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#lottie-bg svg {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #fff;
|
||||
background: rgba(255,255,255,0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 1rem 1.5rem;
|
||||
position: sticky;
|
||||
@@ -18,6 +34,11 @@ header {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
header h1 { font-size: 3rem; margin-bottom: 0; }
|
||||
|
||||
nav { display: flex; gap: 0.5rem; }
|
||||
|
||||
Reference in New Issue
Block a user