feat(about): 优化关于页面样式与交互功能
- 调整 MBTI 标签展示方式，增加多彩渐变效果 - 重构技术栈展示逻辑，移动端采用多行无缝滚动动画 - 优化夜间模式切换逻辑，支持系统主题检测与缓存管理 - 改进博客文章分类显示，移除默认填充内容 - 更新二维码加载失败提示为注释形式 - 增强文本可读性，修复部分元素在特定容器内的颜色异常 - 统一标签与按钮样式，提升视觉一致性与用户体验 - 调整 3D 技术球体透明度上限，增强视觉层次感
This commit is contained in:
hehh
163
css/about.css
163
css/about.css
@@ -191,8 +191,8 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-primary);
|
||||
text-shadow: 0 0 10px rgba(108, 92, 231, 0.3);
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
@@ -409,8 +409,23 @@ body {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.animated-gradient { background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientShift 6s linear infinite; text-shadow: 0 0 8px rgba(108,92,231,0.2); }
|
||||
@keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
|
||||
.animated-gradient {
|
||||
background-image: linear-gradient(90deg, var(--text-primary), var(--accent), var(--text-primary));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: gradientShift 6s linear infinite;
|
||||
text-shadow: 0 0 8px rgba(108, 92, 231, 0.2);
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.location-tag {
|
||||
font-size: 0.85rem;
|
||||
@@ -469,14 +484,20 @@ body {
|
||||
margin-bottom: 20px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.bio-text.collapsed {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.quote-box {
|
||||
@@ -519,7 +540,7 @@ body {
|
||||
|
||||
/* --- MBTI --- */
|
||||
.area-mbti {
|
||||
padding: 30px;
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -529,6 +550,7 @@ body {
|
||||
}
|
||||
|
||||
.mbti-head {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
@@ -551,6 +573,7 @@ body {
|
||||
}
|
||||
|
||||
.mbti-desc {
|
||||
margin-left: 15px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 15px;
|
||||
@@ -559,19 +582,62 @@ body {
|
||||
}
|
||||
|
||||
.mbti-tags {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.75rem;
|
||||
background: rgba(128, 128, 128, 0.1);
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.mbti-tags .tag {
|
||||
background: none;
|
||||
border: none;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mbti-tags .tag.tag-color-1 {
|
||||
background: var(--gradient-1);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.mbti-tags .tag.tag-color-2 {
|
||||
background: var(--gradient-2);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.mbti-tags .tag.tag-color-3 {
|
||||
background: var(--gradient-3);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.mbti-tags .tag.tag-color-4 {
|
||||
background: var(--gradient-4);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* --- Tech Stack (PC) --- */
|
||||
.area-tech {
|
||||
display: flex;
|
||||
@@ -1045,7 +1111,10 @@ body {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.comment-box { padding: 24px; }
|
||||
|
||||
.comment-box {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
@@ -1056,6 +1125,9 @@ body {
|
||||
margin: 20px auto 100px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.mbti-tags {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* Bottom Dock */
|
||||
.glass-nav {
|
||||
@@ -1218,25 +1290,35 @@ body {
|
||||
scroll-snap-type: x mandatory;
|
||||
/* 添加淡入淡出效果 */
|
||||
mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
transparent 100%
|
||||
to right,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
transparent 100%
|
||||
);
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
transparent 100%
|
||||
to right,
|
||||
transparent 0%,
|
||||
black 10%,
|
||||
black 90%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: techMarquee 18s linear infinite;
|
||||
/* 行内滚动动画由 .tech-row 控制 */
|
||||
}
|
||||
|
||||
@keyframes techMarquee {
|
||||
.tech-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
animation: rowMarquee var(--row-speed) linear infinite;
|
||||
}
|
||||
.row-1 { --row-speed: 24s; }
|
||||
.row-2 { --row-speed: 28s; }
|
||||
.row-3 { --row-speed: 32s; }
|
||||
@keyframes rowMarquee {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-33.333%); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.tech-tag-mobile {
|
||||
@@ -1339,7 +1421,10 @@ body {
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.comment-box { padding: 16px; }
|
||||
|
||||
.comment-box {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
@@ -1393,6 +1478,9 @@ body {
|
||||
font-size: 0.75rem;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.site-footer a {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.b-title {
|
||||
background: var(--gradient-3);
|
||||
@@ -1417,4 +1505,29 @@ body {
|
||||
|
||||
[data-theme="night"] .b-title, [data-theme="night"] .b-cat, [data-theme="night"] .b-date {
|
||||
text-shadow: 0 0 8px var(--accent-glow);
|
||||
}
|
||||
|
||||
/* 阅读友好：blog-container 内文本使用常规颜色覆盖渐变 */
|
||||
#blog-container .b-title {
|
||||
background: none !important;
|
||||
-webkit-background-clip: initial;
|
||||
background-clip: initial;
|
||||
color: var(--text-primary) !important;
|
||||
-webkit-text-fill-color: initial;
|
||||
}
|
||||
|
||||
#blog-container .b-cat {
|
||||
background: none !important;
|
||||
-webkit-background-clip: initial;
|
||||
background-clip: initial;
|
||||
color: var(--text-secondary) !important;
|
||||
-webkit-text-fill-color: initial;
|
||||
}
|
||||
|
||||
#blog-container .b-date {
|
||||
background: none !important;
|
||||
-webkit-background-clip: initial;
|
||||
background-clip: initial;
|
||||
color: var(--text-tertiary) !important;
|
||||
-webkit-text-fill-color: initial;
|
||||
}
|
||||
Reference in New Issue
Block a user