mirror of
https://github.com/Afilmory/afilmory
synced 2026-02-01 22:48:17 +00:00
refactor: update splash screen design and animations
- Revised the splash screen's visual design, changing the theme to a more minimalist style. - Updated font families and adjusted layout properties for improved aesthetics and consistency. - Replaced the logo and loading animations with new designs, enhancing user experience during app startup. - Simplified CSS animations and removed unused styles to streamline the code. Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
@@ -26,7 +26,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<!-- Splash Screen - 现代黑色调设计 -->
|
||||
<!-- Splash Screen - 现代简洁设计 -->
|
||||
<div
|
||||
id="splash-screen"
|
||||
style="
|
||||
@@ -41,84 +41,10 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
font-family:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
'Roboto',
|
||||
sans-serif;
|
||||
font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
|
||||
overflow: hidden;
|
||||
"
|
||||
>
|
||||
<!-- 几何背景装饰 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 20% 30%,
|
||||
rgba(64, 64, 64, 0.1) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 70%,
|
||||
rgba(64, 64, 64, 0.08) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 80%,
|
||||
rgba(96, 96, 96, 0.05) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- 网格背景 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.02;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 30px 30px;
|
||||
animation: gridMove 20s linear infinite;
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- 动态光线效果 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.01),
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.02),
|
||||
transparent
|
||||
);
|
||||
animation: rotate 30s linear infinite;
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<div
|
||||
style="
|
||||
@@ -127,151 +53,109 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2.5rem;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
<!-- Logo Container -->
|
||||
<!-- Logo -->
|
||||
<div
|
||||
style="
|
||||
position: relative;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1),
|
||||
0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
animation: logoFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
backdrop-filter: blur(10px);
|
||||
"
|
||||
>
|
||||
<!-- Logo 背景光晕 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
border-radius: 50%;
|
||||
animation: glowPulse 3s ease-in-out infinite;
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div
|
||||
style="
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
|
||||
border: 1px solid #333;
|
||||
border-radius: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05),
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
animation: logoFloat 4s ease-in-out infinite;
|
||||
backdrop-filter: blur(10px);
|
||||
"
|
||||
<!-- 相机图标 -->
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#0a0a0a"
|
||||
stroke-width="1.8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<!-- 现代化相机图标 -->
|
||||
<svg
|
||||
width="28"
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#e5e5e5"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M3 9a2 2 0 0 1 2-2h.93a2 2 0 0 0 1.664-.89l.812-1.22A2 2 0 0 1 10.07 4h3.86a2 2 0 0 1 1.664.89l.812 1.22A2 2 0 0 0 18.07 7H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z"
|
||||
/>
|
||||
<circle cx="12" cy="13" r="3" />
|
||||
<circle cx="12" cy="13" r="1" fill="#e5e5e5" />
|
||||
</svg>
|
||||
</div>
|
||||
<path
|
||||
d="M3 9a2 2 0 0 1 2-2h.93a2 2 0 0 0 1.664-.89l.812-1.22A2 2 0 0 1 10.07 4h3.86a2 2 0 0 1 1.664.89l.812 1.22A2 2 0 0 0 18.07 7H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z"
|
||||
/>
|
||||
<circle cx="12" cy="13" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 应用标题 -->
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem">
|
||||
<div style="display: flex; flex-direction: column; gap: 0.75rem">
|
||||
<h1
|
||||
style="
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
color: #ffffff;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin: 0;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
animation: titleSlide 1s ease-out;
|
||||
animation: titleFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s
|
||||
both;
|
||||
"
|
||||
>
|
||||
<%- title %>
|
||||
</h1>
|
||||
<div
|
||||
style="
|
||||
width: 3rem;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
#666,
|
||||
transparent
|
||||
);
|
||||
margin: 0 auto;
|
||||
animation: lineGrow 1.5s ease-out both;
|
||||
"
|
||||
></div>
|
||||
<p
|
||||
style="
|
||||
color: #a3a3a3;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.025em;
|
||||
animation: subtitleFade 1.5s ease-out both;
|
||||
opacity: 0;
|
||||
letter-spacing: 0.01em;
|
||||
animation: subtitleFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s
|
||||
both;
|
||||
"
|
||||
>
|
||||
<%- description %>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 现代加载动画 -->
|
||||
<!-- 加载动画 -->
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
animation: loaderFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
|
||||
"
|
||||
>
|
||||
<!-- 进度条 -->
|
||||
<div
|
||||
style="
|
||||
width: 12rem;
|
||||
height: 2px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
"
|
||||
>
|
||||
<!-- 点状加载器 -->
|
||||
<div style="display: flex; gap: 0.5rem; align-items: center">
|
||||
<div
|
||||
style="
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
#666,
|
||||
#999,
|
||||
#666,
|
||||
transparent
|
||||
);
|
||||
animation: progressMove 2s ease-in-out infinite;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
animation: dotPulse 1.4s ease-in-out infinite;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
animation: dotPulse 1.4s ease-in-out infinite 0.2s;
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
style="
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
animation: dotPulse 1.4s ease-in-out infinite 0.4s;
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
@@ -280,69 +164,18 @@
|
||||
|
||||
<!-- CSS 动画 -->
|
||||
<style>
|
||||
@keyframes gridMove {
|
||||
@keyframes logoFade {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: translate(30px, 30px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logoFloat {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes titleSlide {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lineGrow {
|
||||
0% {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
width: 3rem;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes subtitleFade {
|
||||
@keyframes titleFade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
@@ -353,44 +186,56 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progressMove {
|
||||
@keyframes subtitleFade {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(400%);
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loadingText {
|
||||
@keyframes loaderFade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
opacity: 0.3;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
#splash-screen h1 {
|
||||
font-size: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#splash-screen p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
#splash-screen [style*='width: 12rem'] {
|
||||
width: 10rem !important;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#splash-screen h1 {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
#splash-screen [style*='gap: 2.5rem'] {
|
||||
gap: 2rem !important;
|
||||
#splash-screen [style*='gap: 2rem'] {
|
||||
gap: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user