feat(about): 添加背景音乐功能并优化玻璃态效果

- 在 about.html 中添加音频元素和播放控制按钮
- 更新 CSS 样式以增强玻璃态视觉效果和悬停动画
- 在 JavaScript 中实现音频初始化和播放控制逻辑
- 添加多语言支持的字幕和标签翻译
- 优化移动端 FAB 菜单交互体验
- 移除旧版音乐模块相关代码
This commit is contained in:
hehh
2025-11-23 21:48:52 +08:00
parent 16a135053f
commit a002fcc5d6
3 changed files with 39 additions and 10 deletions

View File

@@ -14,10 +14,10 @@
--bg-grad-1: #a1c4fd;
--bg-grad-2: #c2e9fb;
--glass-bg: rgba(255, 255, 255, 0.65);
--glass-bg: rgba(255, 255, 255, 0.55);
--glass-border: 1px solid rgba(255, 255, 255, 0.9);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
--glass-blur: 20px;
--glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
--glass-blur: 28px;
--text-primary: #2d3436;
--text-secondary: #636e72;
@@ -48,9 +48,9 @@
--bg-grad-1: #2d3436;
--bg-grad-2: #000000;
--glass-bg: rgba(30, 30, 35, 0.65);
--glass-bg: rgba(30, 30, 35, 0.55);
--glass-border: 1px solid rgba(255, 255, 255, 0.08);
--glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
--glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
--text-primary: #dfe6e9;
--text-secondary: #b2bec3;
@@ -140,8 +140,8 @@ body {
========================================= */
.glass-nav, .bento-card, .glass-panel, .modal-glass {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur)) saturate(130%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
border: var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius);
@@ -150,7 +150,7 @@ body {
.bento-card:hover, .glass-panel:hover {
transform: translateY(-4px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.15);
border-color: var(--accent);
}
@@ -1586,4 +1586,5 @@ body {
.fab-menu { display: none; flex-direction: column; gap: 10px; margin-top: 10px; }
.fab-item { display: flex; align-items: center; gap: 6px; background: var(--glass-bg); border-radius: 18px; padding: 8px 12px; border: var(--glass-border); box-shadow: var(--glass-shadow); }
.fab-menu.open { display: flex; }
.site-audio { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; display: none; }
/* music module removed */