add background

This commit is contained in:
b1ek 2023-08-13 11:30:08 +10:00
parent ed263cd9b8
commit 2facd06e75
Signed by: blek
GPG Key ID: 14546221E3595D0C
4 changed files with 61 additions and 1 deletions

View File

@ -5,7 +5,6 @@ body, html {
font-family: 'Red Hat Display Variable', 'Open Sans', sans-serif;
}
.backdrop {
background: #111;
width: 100%;
height: 100%;
position: fixed;

View File

@ -8,6 +8,7 @@
import { Router, Link, Route, navigate } from "svelte-routing";
import RouteStore from './store/RouteStore';
import Background from './widget/Background/Background.svelte';
export let url = "/load";
RouteStore.subscribe(() => {
@ -20,6 +21,8 @@
</script>
<Titlebar />
<Background />
<div class={style.backdrop}>
<div class={style['delay-show']}>
<Router {url}>

View File

@ -0,0 +1,6 @@
<script lang="ts">
import style from './style.module.scss';
</script>
<div class={style.backdrop_bg}></div>
<div class={style.mesh_bg}></div>

View File

@ -0,0 +1,52 @@
@keyframes backdrop {
0% { background: #0e0e0e }
50% { background: #0e0606 }
to { background: #0e0e0e }
}
.backdrop_bg {
background: #0e0606;
width: 100%; height: 100%;
position: fixed;
border-radius: 16px;
animation: backdrop 15s ease infinite;
}
@keyframes breeze {
0% {
opacity: 0.1;
filter: blur(64px);
transform: translate(-50%, -50%);
width: 90%; height: 80%;
}
33% {
opacity: 0.5;
filter: blur(82px);
transform: translate(-50%, -40%);
width: 100%; height: 100%;
}
67% {
opacity: 0.5;
filter: blur(72px);
transform: translate(-50%, -60%);
width: 100%; height: 100%;
}
to {
opacity: 0.1;
filter: blur(64px);
transform: translate(-50%, -50%);
width: 90%; height: 80%;
}
}
.mesh_bg {
background: linear-gradient(45deg, rgba(3, 32, 87, 0.25) 25%, rgba(165, 5, 138, 0.25) 75%);
width: 90%; height: 80%;
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border-radius: 800px 1200px;
filter: blur(64px);
opacity: 0.1;
animation: breeze 25s ease infinite;
}