EZPPFarm/EZPPLauncher
2
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases 14 Activity

fix logo

Browse Source
This commit is contained in:
HorizonCode 2024-12-12 10:32:37 +01:00
parent e305e6eed9
commit 615a265c89
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/components/ui/logo/logo.svelte
View File

@ -1,44 +1,56 @@
<script lang="ts">
import ezppLogo from "../../../../assets/logo.png";
type logoProps = {
extended: boolean;
onclick: () => void;
};
let { extended, onclick }: logoProps = $props();
</script>
<div class="w-screen pointer-events-none">
<div
class="w-screen {extended
? '-translate-y-2 scale-90'
: 'translate-y-5 scale-125'} transition-transform select-none"
>
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="logo-animation relative w-44 h-44 mx-auto">
<img class="absolute main-logo" src={ezppLogo} alt="logo" />
<div class="logo-animation relative w-44 h-44 mx-auto cursor-pointer" {onclick}>
<img class="absolute pulse-logo" src={ezppLogo} alt="logo-pulse" />
<img class="absolute main-logo" src={ezppLogo} alt="logo" />
</div>
</div>
<style lang="scss">
.logo-animation {
.pulse-logo {
animation: 0.4s infinite forwards beat-pulse;
animation: 0.5s 0.2s infinite forwards beat-pulse;
}
.main-logo {
animation: 0.4s infinite forwards beat;
animation: 0.5s infinite forwards beat;
}
}
@keyframes beat {
0%,
100% {
scale: 1;
scale: 1.08;
}
90% {
scale: 1.05;
scale: 1;
}
}
@keyframes beat-pulse {
0%,
100% {
scale: 0.9;
opacity: 0;
0% {
scale: 0.5;
opacity: 0.5;
filter: blur(0px);
}
85% {
scale: 1.15;
opacity: 0.25;
100% {
scale: 1.4;
opacity: 0;
filter: blur(2px);
}
}
</style>