JayXiao718/fullstack-starter
1
0
Fork 0
forked from imbytecat/fullstack-starter
Code Pull Requests Activity

style(desktop): loading 页面改为白色轻盈主题

Browse Source
This commit is contained in:
imbytecat
2026-02-08 19:40:20 +08:00
parent e4e5ff2211
commit ed02993350
2 changed files with 25 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/desktop/src/renderer/index.html
View File

@@ -6,14 +6,13 @@
<title>Furtherverse</title> <title>Furtherverse</title>
<link rel="stylesheet" href="./styles.css" /> <link rel="stylesheet" href="./styles.css" />
</head> </head>
<body class="m-0 h-screen bg-[#050505] text-white font-sans flex flex-col items-center justify-center overflow-hidden cursor-default select-none"> <body class="bg-white h-screen w-screen flex flex-col items-center justify-center overflow-hidden select-none cursor-default font-sans antialiased m-0">
<div class="absolute w-[80vw] h-[80vw] bg-[radial-gradient(circle,rgba(255,255,255,0.06)_0%,transparent_60%)] rounded-full animate-breathe pointer-events-none"></div> <div class="flex flex-col items-center gap-8 animate-fade-in">
<div class="flex flex-col items-center gap-7 z-10 animate-appear"> <h1 class="text-3xl font-medium tracking-tight text-zinc-900">Furtherverse</h1>
<h1 class="m-0 text-[32px] font-medium tracking-[-0.03em] bg-[linear-gradient(to_bottom_right,#ffffff_30%,#a1a1aa)] bg-clip-text text-transparent">Furtherverse</h1> <div class="w-24 h-[2px] bg-zinc-100 rounded-full overflow-hidden relative">
<div class="w-30 h-px bg-white/8 rounded-[1px] overflow-hidden relative"> <div class="h-full w-full bg-zinc-800 origin-left animate-loading-bar"></div>
<div class="absolute inset-y-0 left-0 w-2/5 bg-[linear-gradient(90deg,transparent,#fff,transparent)] animate-slide opacity-60"></div>
</div> </div>
<div class="text-[11px] uppercase tracking-[0.2em] text-zinc-600 font-medium animate-pulse-subtle">Starting</div> <div class="text-[10px] uppercase tracking-widest text-zinc-400 font-medium animate-pulse-slow">Starting</div>
</div> </div>
</body> </body>
</html> </html>

47
apps/desktop/src/renderer/styles.css
View File

@@ -1,36 +1,15 @@
@import "tailwindcss"; @import "tailwindcss";
@theme { @theme {
--animate-breathe: breathe 8s ease-in-out infinite alternate; --animate-fade-in: fade-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
--animate-slide: slide 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; --animate-pulse-slow: pulse-slow 3s ease-in-out infinite;
--animate-appear: appear 1s ease-out 0.2s both; --animate-loading-bar: loading-bar 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
--animate-pulse-subtle: pulse-subtle 3s ease-in-out infinite;
} }
@keyframes breathe { @keyframes fade-in {
from {
transform: scale(0.95);
opacity: 0.5;
}
to {
transform: scale(1.05);
opacity: 0.8;
}
}
@keyframes slide {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(350%);
}
}
@keyframes appear {
from { from {
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(4px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -38,12 +17,24 @@
} }
} }
@keyframes pulse-subtle { @keyframes pulse-slow {
0%, 0%,
100% { 100% {
opacity: 0.5; opacity: 0.4;
} }
50% { 50% {
opacity: 0.8; opacity: 0.8;
} }
} }
@keyframes loading-bar {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}