Honesty/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(about): 优化技术栈标签展示效果

Browse Source 
- 修改 .area-tech 和 .tech-wrapper 的 overflow 属性为 visible
- 移除 tech-tag-3d 的背景色和边框样式，仅保留文字渐变效果
- 为移动端和技术栈标签添加 z-index 提升层级显示
- 删除滚动动画 keyframes 及相关样式
- JS 中调整标签颜色类分配逻辑，确保只显示文字无背景
- 增大 3D 球体半径避免标签重叠
- 优化自动旋转逻辑，保持低速持续旋转
- 调整标签缩放和透明度计算方式提升视觉体验
This commit is contained in:
hehh
2025-11-23 17:39:53 +08:00
parent 083bf81d10
commit 958bf037c4
2 changed files with 41 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
css/about.css
View File

@@ -261,11 +261,11 @@ body {
.tag { font-size: 0.75rem; background: rgba(128,128,128,0.1); padding: 4px 10px; border-radius: 6px; color: var(--text-secondary); }
/* --- Tech Stack (PC) --- */
.area-tech { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.area-tech { display: flex; flex-direction: column; position: relative; overflow: visible; }
.card-header { padding: 20px 25px; border-bottom: 1px solid rgba(128,128,128,0.1); }
.card-header h3 { font-size: 1.1rem; color: var(--text-primary); margin: 0; }
/* PC 3D Container */
.tech-wrapper { flex: 1; position: relative; min-height: 250px; width: 100%; }
.tech-wrapper { flex: 1; position: relative; min-height: 250px; width: 100%; overflow: visible; }
.tech-tag-3d {
position: absolute;
font-size: 0.85rem;
@@ -277,35 +277,50 @@ body {
white-space: nowrap;
backface-visibility: hidden;
will-change: transform;
/* 移除背景色和边框，只保留文字渐变效果 */
/* 只保留文字渐变效果 */
background: none;
border: none;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
pointer-events: none; /* 禁用鼠标事件避免干扰 */
z-index: 10;
}
/* 不同颜色的标签 */
.tech-tag-3d.tag-color-1, .tech-tag-mobile.tag-color-1 {
background: var(--gradient-1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-2, .tech-tag-mobile.tag-color-2 {
background: var(--gradient-2);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-3, .tech-tag-mobile.tag-color-3 {
background: var(--gradient-3);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-4, .tech-tag-mobile.tag-color-4 {
background: var(--gradient-4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tech-tag-3d.tag-color-5, .tech-tag-mobile.tag-color-5 {
background: var(--gradient-5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 扩展更多渐变方案 */
.tech-tag-3d.tag-color-6, .tech-tag-mobile.tag-color-6 { background: var(--gradient-6); }
@@ -730,13 +745,6 @@ body {
black 90%,
transparent 100%
);
/* 添加持续滚动动画 */
animation: scrollLine 15s linear infinite;
}
@keyframes scrollLine {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.tech-tag-mobile {
@@ -753,8 +761,8 @@ body {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
pointer-events: none;
z-index: 10;
}
/* Mobile Social */

34
js/about.js
View File

@@ -396,10 +396,13 @@ class UIManager {
const el = document.createElement('span');
el.className = 'tech-tag-mobile';
// 添加不同颜色的渐变类
const colorClass = `tag-color-${item.gradientId}`;
const colorClass = `tag-color-${(index % 5) + 1}`;
el.classList.add(colorClass);
el.innerText = item.name;
el.style.gridRow = `${(index % 3) + 1}`;
// 确保只显示文字，没有背景和边框
el.style.background = 'none';
el.style.border = 'none';
el.style.color = 'transparent';
container.appendChild(el);
});
} else {
@@ -413,17 +416,21 @@ class UIManager {
const el = document.createElement('a');
el.className = 'tech-tag-3d';
// 添加不同颜色的渐变类
const colorClass = `tag-color-${item.gradientId}`;
const colorClass = `tag-color-${(index % 5) + 1}`;
el.classList.add(colorClass);
el.innerText = item.name;
// 移除背景和边框样式，只保留文字
el.style.background = 'none';
el.style.border = 'none';
el.style.color = 'transparent';
container.appendChild(el);
tags.push({ el, x:0, y:0, z:0 });
});
let radius = Math.max(180, Math.min(container.offsetWidth, container.offsetHeight) / 2 - 24);
// 增大球体半径以避免标签重叠
let radius = 300;
const dtr = Math.PI/180;
const autoAx = 0.6, autoBx = 0.5;
let lasta=1, lastb=1;
let active=false, mouseX=0, mouseY=0;
// Init positions
@@ -444,15 +451,17 @@ class UIManager {
};
const update = () => {
if (container.__animToken !== token) return;
let a, b;
if(active) {
a = (-Math.min(Math.max(-mouseY, -200), 200)/radius) * 2 + autoAx;
b = (Math.min(Math.max(-mouseX, -200), 200)/radius) * 2 + autoBx;
a = (-Math.min(Math.max(-mouseY, -200), 200)/radius) * 2;
b = (Math.min(Math.max(-mouseX, -200), 200)/radius) * 2;
} else {
a = autoAx;
b = autoBx;
a = lasta * 0.98; // Auto rotate
b = lastb * 0.98;
}
lasta=a; lastb=b;
if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01 && !active) a=0.5; // Keep spinning slowly
let sa=Math.sin(a*dtr), ca=Math.cos(a*dtr);
let sb=Math.sin(b*dtr), cb=Math.cos(b*dtr);
@@ -462,8 +471,7 @@ class UIManager {
let rx2=rx1*cb + rz1*sb, ry2=ry1, rz2=rx1*-sb + rz1*cb;
tag.x=rx2; tag.y=ry2; tag.z=rz2;
let scale = (tag.z + radius)/(2*radius) + 0.45;
scale = Math.min(Math.max(scale, 0.7), 1.2);
let scale = (tag.z + radius)/(2*radius) + 0.5;
let opacity = (tag.z + radius)/(2*radius) + 0.2;
tag.el.style.opacity = Math.min(Math.max(opacity, 0.1), 1);
@@ -472,7 +480,7 @@ class UIManager {
let top = tag.y + container.offsetHeight/2 - tag.el.offsetHeight/2;
tag.el.style.transform = `translate(${left}px, ${top}px) scale(${scale})`;
});
container.__animId = requestAnimationFrame(update);
requestAnimationFrame(update);
};
update();
}