diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8646d98..1e28a6d 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,6 +5,7 @@ import Maskenball from '$lib/components/maskenball.svelte'; +
@@ -20,6 +21,30 @@ justify-content: center; margin-top: 50px; } + .drapery { + background-image: url('/drapery.png'); + position: absolute; + top: -50px; + left: 0px; + width: 100vw; + height: 300px; + background-repeat: repeat-x; + background-size: 500px; + z-index: 3; + filter: brightness(1.2) contrast(1.2) saturate(1.3) hue-rotate(-15deg) + drop-shadow(0px 0px 50px black); + animation: draperyIn 2s 2s ease forwards; + animation-delay: 2s; + transform: translateY(-500px) scaleY(0); + } + @keyframes draperyIn { + from { + transform: translateY(-500px) scaleY(0); + } + to { + transform: translateY(0px) scaleY(1); + } + } img.curtain-right { position: fixed; top: -30px; @@ -28,12 +53,12 @@ z-index: 2; filter: brightness(0.8) contrast(1.1) saturate(0.6); animation: moveInRight 2s ease forwards; - animation-delay: 0.5s; - transform: translateX(100%); + animation-delay: 2s; + transform: translateX(120%) rotate(-10deg); } @keyframes moveInRight { from { - transform: translateX(100%) rotate(-10deg); + transform: translateX(120%) rotate(-10deg); } to { transform: translateX(15%) rotate(0deg); @@ -47,15 +72,14 @@ width: 400px; z-index: 2; filter: brightness(0.8) contrast(1.1) saturate(0.6); - animation: moveInLeft 2s ease forwards; - animation-delay: 0.5s; - transform: translateX(-100%); + animation-delay: 2s; + transform: translateX(-120%) rotate(10deg) scaleX(-1); } @keyframes moveInLeft { from { - transform: translateX(-100%) rotate(10deg) scaleX(-1); + transform: translateX(-120%) rotate(10deg) scaleX(-1); } to { transform: translateX(-15%) rotate(0deg) scaleX(-1); diff --git a/static/drapery.png b/static/drapery.png new file mode 100755 index 0000000..a4a7226 Binary files /dev/null and b/static/drapery.png differ