feat(css): 添加玻璃态卡片样式
- 新增 `.glass-card` 类,包含背景、边框、阴影和悬停效果 - 在 `about.html` 中为多个卡片元素应用 `.glass-card` 样式 - 提升页面视觉层次和交互体验
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user