From 26b74372e0ef2537874b9ac27908bc401c39d2de Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Fri, 21 Nov 2025 11:51:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(css):=20=E6=B7=BB=E5=8A=A0=E7=8E=BB?=
 =?UTF-8?q?=E7=92=83=E6=80=81=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 `.glass-card` 类，包含背景、边框、阴影和悬停效果
- 在 `about.html` 中为多个卡片元素应用 `.glass-card` 样式
- 提升页面视觉层次和交互体验
---
 about.html    |  6 +++---
 css/about.css | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/about.html b/about.html
index 6e45784..2834c99 100644
--- a/about.html
+++ b/about.html
@@ -36,7 +36,7 @@
                 
                 <div class="hero-container">
                     <div class="hero-left">
-                        <div class="profile-card">
+                        <div class="profile-card glass-card">
                             <div class="profile-avatar">
                                 <img src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg" alt="Honesty" class="avatar-image">
                                 <div class="status-indicator"></div>
@@ -70,7 +70,7 @@
                                 </div>
                         </div>
                             <div class="personality-section">
-                                <div class="mbti-card">
+                                <div class="mbti-card glass-card">
                                     <div class="mbti-header">
                                         <img src="https://blog-file.hehouhui.cn/INFJ.png" alt="INFJ" style="width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,0.4)">
                                         <span class="mbti-tag">INFJ</span>
@@ -131,7 +131,7 @@
                 <div class="personality-timeline">
                     <div class="timeline-item">
                         <div class="timeline-icon">🚴‍♂️</div>
-                        <div class="timeline-content">
+                                    <div class="timeline-content glass-card">
                             <h3>骑行爱好者</h3>
                             <p>享受在路上的自由感，用车轮丈量世界，在风景中寻找灵感</p>
                         </div>
diff --git a/css/about.css b/css/about.css
index 7ca691c..bc8c318 100644
--- a/css/about.css
+++ b/css/about.css
@@ -294,6 +294,22 @@ body {
     background-attachment: fixed;
 }
 
+.glass-card {
+    background: rgba(255, 255, 255, var(--glass-alpha));
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border: 1px solid var(--glass-border);
+    border-radius: 18px;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.glass-card:hover {
+    transform: translateY(-2px);
+    background: rgba(255, 255, 255, calc(var(--glass-alpha) + 0.05));
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
+}
+
 .gradient-text {
     color: var(--text-strong);
     background: none;