Blizzard
153 lines
2.8 KiB
Plaintext
153 lines
2.8 KiB
Plaintext
/* 启动页 — 深空蓝沉浸主题 */
|
|
|
|
.splash-page {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #FAFAF8;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* 环境光晕 */
|
|
.splash-glow {
|
|
position: absolute;
|
|
top: -10vh;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 120vw;
|
|
height: 60vh;
|
|
background: radial-gradient(ellipse at center, rgba(255,158,109,0.2) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 主内容容器 */
|
|
.splash-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
transition: opacity 1.0s ease, transform 1.0s ease, filter 1.0s ease;
|
|
}
|
|
.splash-content.fade-out {
|
|
opacity: 0;
|
|
transform: scale(1.06) translateY(-12rpx);
|
|
filter: blur(6px);
|
|
}
|
|
|
|
/* ── 图标 ── */
|
|
.logo-wrap {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 64rpx;
|
|
position: relative;
|
|
}
|
|
.logo-icon {
|
|
font-size: 120rpx;
|
|
filter: drop-shadow(0 16rpx 40rpx rgba(255,158,109,0.35));
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 双层脉冲环 */
|
|
.pulse-ring {
|
|
position: absolute;
|
|
inset: -20rpx;
|
|
border-radius: 50%;
|
|
border: 3rpx solid rgba(255, 158, 109, 0.35);
|
|
animation: pulse-expand 2s ease-out infinite;
|
|
}
|
|
.pulse-ring-2 {
|
|
animation-delay: 1s;
|
|
}
|
|
@keyframes pulse-expand {
|
|
0% { transform: scale(0.7); opacity: 0.8; }
|
|
100% { transform: scale(1.6); opacity: 0; }
|
|
}
|
|
|
|
/* ── 文字 ── */
|
|
.app-title {
|
|
font-size: 64rpx;
|
|
font-weight: 800;
|
|
color: #333333;
|
|
letter-spacing: -2rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.app-sub {
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
letter-spacing: 6rpx;
|
|
margin-bottom: 28rpx;
|
|
text-transform: uppercase;
|
|
}
|
|
.app-slogan {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
letter-spacing: 3rpx;
|
|
}
|
|
|
|
/* ── 状态区 ── */
|
|
.status-area {
|
|
margin-top: 100rpx;
|
|
height: 48rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.status-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
/* 三点加载动画 */
|
|
.loading-dots {
|
|
display: flex;
|
|
gap: 12rpx;
|
|
align-items: center;
|
|
}
|
|
.dot {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 158, 109, 0.8);
|
|
animation: dot-bounce 1.2s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes dot-bounce {
|
|
0% { transform: translateY(0); opacity: 0.3; }
|
|
100% { transform: translateY(-12rpx); opacity: 1; }
|
|
}
|
|
|
|
/* 成功状态 */
|
|
.status-check {
|
|
font-size: 32rpx;
|
|
color: #FF9E6D;
|
|
font-weight: 700;
|
|
}
|
|
.status-ok {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── 底部版权 ── */
|
|
.splash-footer {
|
|
position: absolute;
|
|
bottom: 80rpx;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
}
|
|
.footer-text {
|
|
font-size: 20rpx;
|
|
color: #CCCCCC;
|
|
letter-spacing: 2rpx;
|
|
}
|