✨ 操作指南
点击屏幕任意位置发射烟花
快捷键：
空格 暂停/继续
C 清空屏幕
R 重新开始
}
.stat-item:last-child {
margin-bottom: 0;
}
.stat-label {
color: var(--text-secondary);
margin-right: 16px;
}
.stat-value {
font-family: 'Orbitron', monospace;
font-weight: 700;
font-size: 1.125rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 控制按钮面板 */
.controls {
position: absolute;
bottom: 30px;
left: 30px;
display: flex;
gap: 12px;
pointer-events: auto;
animation: fadeInUp 1s ease-out 0.7s backwards;
}
.btn {
padding: 12px 24px;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: 12px;
color: var(--text-primary);
font-family: 'Orbitron', sans-serif;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.05em;
pointer-events: auto;
}
.btn:hover {
background: rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.5);
box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
/* 点击提示 */
.click-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 24px 40px;
pointer-events: none;
animation: pulse 2s ease-in-out infinite;
font-size: 1.125rem;
text-align: center;
}
.click-hint.hidden {
display: none;
}
/* 动画 */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateX(-50%) translateY(-30px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateY(-50%) translateX(-30px);
}
to {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.05);
}
}
/* 响应式 */
@media (max-width: 768px) {
.info-panel {
left: 15px;
right: 15px;
top: auto;
bottom: 120px;
transform: none;
max-width: none;
}
.stats-panel {
right: 15px;
bottom: 15px;
}
.controls {
left: 15px;
bottom: 15px;
flex-wrap: wrap;
}
.btn {
padding: 10px 16px;
font-size: 0.75rem;
}
}
✨ 操作指南
点击屏幕任意位置发射烟花
快捷键：
空格 暂停/继续
C 清空屏幕
R 重新开始
👆 点击屏幕启动音效并开始表演