diff --git a/css/about.css b/css/about.css index e1a0c59..cae785b 100644 --- a/css/about.css +++ b/css/about.css @@ -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 */ diff --git a/js/about.js b/js/about.js index 9700c80..ed9b083 100644 --- a/js/about.js +++ b/js/about.js @@ -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(); }