diff --git a/css/about.css b/css/about.css index 99481d3..3153bd9 100644 --- a/css/about.css +++ b/css/about.css @@ -1165,8 +1165,8 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info overflow: hidden; justify-content: center; align-items: center; - padding: 20px 0; - gap: 15px; + padding: 8px 0; + gap: 6px; min-height: 150px; } @@ -1178,41 +1178,21 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info /* 三行滚动容器 */ .tech-row { - display: flex; + position: relative; + display: block; width: 100%; - animation: scroll linear infinite; - animation-play-state: paused; - gap: 15px; - padding: 10px 0; + overflow: hidden; + padding: 1px 0; + height: auto; } - .tech-row.scrolling { - animation-play-state: running; - } - - /* 第一行滚动速度 - 增快10倍 */ - .tech-row:nth-child(1) { - animation-duration: 3s; - } - - /* 第二行滚动速度 - 增快10倍 */ - .tech-row:nth-child(2) { - animation-duration: 3.5s; - } - - /* 第三行滚动速度 - 增快10倍 */ - .tech-row:nth-child(3) { - animation-duration: 4s; - } - - /* 滚动动画 */ - @keyframes scroll { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-50%); - } + .tech-track { + position: absolute; + left: 0; + top: 0; + display: inline-flex; + gap: 2px; + will-change: transform; } .cloud-tag { diff --git a/js/about.js b/js/about.js index adae04d..5f8683b 100644 --- a/js/about.js +++ b/js/about.js @@ -484,67 +484,57 @@ function initHorizontalTechCloud(items) { container.innerHTML = ''; container.classList.remove('sphere'); - // 按权重排序,确保重要的标签优先显示 - var sortedItems = items.slice().sort(function(a, b) { - return b.weight - a.weight; - }); - - // 创建三行容器 - var row1 = document.createElement('div'); - var row2 = document.createElement('div'); - var row3 = document.createElement('div'); - - row1.className = 'tech-row'; - row2.className = 'tech-row'; - row3.className = 'tech-row'; - - // 将标签分配到三行中(先放原始标签,避免相邻重复) - sortedItems.forEach(function(item, index) { - var el = document.createElement('span'); - el.className = 'cloud-tag'; - el.textContent = item.name; - el.setAttribute('data-category', item.category); - el.setAttribute('data-weight', item.weight); - - // 根据索引分配到不同行 - if (index % 3 === 0) { - row1.appendChild(el); - } else if (index % 3 === 1) { - row2.appendChild(el); - } else { - row3.appendChild(el); - } - }); - - // 追加克隆集合(在所有原始标签之后再追加一轮,用于无缝滚动) - function appendClones(row) { - var originals = Array.from(row.children); - originals.forEach(function(node) { - var clone = node.cloneNode(true); - clone.setAttribute('data-clone', 'true'); - row.appendChild(clone); - }); + var sortedItems = items.slice().sort(function(a, b) { return b.weight - a.weight; }); + var unique = []; + var seen = new Set(); + for (var i = 0; i < sortedItems.length; i++) { + var key = sortedItems[i].name + '|' + sortedItems[i].category; + if (!seen.has(key)) { seen.add(key); unique.push(sortedItems[i]); } } - appendClones(row1); - appendClones(row2); - appendClones(row3); - container.appendChild(row1); - container.appendChild(row2); - container.appendChild(row3); + function makeRow(itemsForRow, speed) { + var row = document.createElement('div'); + row.className = 'tech-row'; + var track = document.createElement('div'); + track.className = 'tech-track'; + row.appendChild(track); + for (var i = 0; i < itemsForRow.length; i++) { + var el = document.createElement('span'); + el.className = 'cloud-tag'; + el.textContent = itemsForRow[i].name; + el.setAttribute('data-category', itemsForRow[i].category); + el.setAttribute('data-weight', itemsForRow[i].weight); + track.appendChild(el); + } + var clones = track.cloneNode(true); + clones.className = 'tech-track'; + row.appendChild(clones); + // 设置行高为单个轨道的高度,避免双轨叠加增高 + requestAnimationFrame(function(){ + row.style.height = track.offsetHeight + 'px'; + }); + container.appendChild(row); + var offset = 0; + var firstWidth = track.scrollWidth; + function step() { + offset -= speed; + if (offset <= -firstWidth) offset += firstWidth; + track.style.transform = 'translateX(' + offset + 'px)'; + clones.style.transform = 'translateX(' + (offset + firstWidth) + 'px)'; + requestAnimationFrame(step); + } + requestAnimationFrame(step); + } - // 设置不同的初始延迟时间 - setTimeout(function() { - row1.classList.add('scrolling'); - }, 0); - - setTimeout(function() { - row2.classList.add('scrolling'); - }, 500); - - setTimeout(function() { - row3.classList.add('scrolling'); - }, 1000); + var rowA = [], rowB = [], rowC = []; + for (var j = 0; j < unique.length; j++) { + if (j % 3 === 0) rowA.push(unique[j]); + else if (j % 3 === 1) rowB.push(unique[j]); + else rowC.push(unique[j]); + } + makeRow(rowA, 0.4); + makeRow(rowB, 0.5); + makeRow(rowC, 0.6); } // PC端3D球状技术云