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