diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 5aefa86..e519cfa 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -199,17 +199,14 @@ export default function Home({ locale }: { locale: Locale }) { const news = t.news.items.slice(0, 3); - // 环绕中央玻璃球的轨道粒子:7 圈 · 22 颗发光点(颜色 4 色循环) - // 半径 110~275px,围绕玻璃球(半径约 100px)外侧公转,每颗分色 + // 环绕中央玻璃球的轨道粒子:4 圈 · 12 颗发光点(颜色 4 色循环) + // 半径拉开 65px 等差间距,避免圈间拥挤;速度外慢内快(18→36s),视觉更优雅 const DOT_PALETTE = ['white', 'blue', 'violet', 'pink'] as const; const orbits = [ - { r: 110, d: '11s', rev: false, dots: [{ sz: 5, a: '20deg' }, { sz: 4, a: '110deg' }, { sz: 5, a: '200deg' }, { sz: 4, a: '310deg' }] }, - { r: 140, d: '14s', rev: true, dots: [{ sz: 5, a: '50deg' }, { sz: 4, a: '170deg' }, { sz: 5, a: '300deg' }] }, - { r: 170, d: '17s', rev: false, dots: [{ sz: 4, a: '0deg' }, { sz: 4, a: '95deg' }, { sz: 4, a: '210deg' }, { sz: 4, a: '305deg' }] }, - { r: 200, d: '20s', rev: true, dots: [{ sz: 4, a: '40deg' }, { sz: 3, a: '140deg' }, { sz: 3, a: '240deg' }, { sz: 4, a: '330deg' }] }, - { r: 228, d: '23s', rev: false, dots: [{ sz: 3, a: '25deg' }, { sz: 3, a: '130deg' }, { sz: 3, a: '250deg' }] }, - { r: 252, d: '26s', rev: true, dots: [{ sz: 3, a: '45deg' }, { sz: 3, a: '110deg' }, { sz: 3, a: '190deg' }, { sz: 3, a: '270deg' }, { sz: 3, a: '330deg' }] }, - { r: 275, d: '29s', rev: false, dots: [{ sz: 3, a: '15deg' }, { sz: 3, a: '100deg' }, { sz: 3, a: '160deg' }, { sz: 3, a: '240deg' }, { sz: 3, a: '320deg' }] }, + { r: 145, d: '18s', rev: false, dots: [{ sz: 5, a: '15deg' }, { sz: 4, a: '135deg' }, { sz: 5, a: '255deg' }] }, + { r: 210, d: '24s', rev: true, dots: [{ sz: 5, a: '75deg' }, { sz: 4, a: '195deg' }, { sz: 5, a: '315deg' }] }, + { r: 275, d: '30s', rev: false, dots: [{ sz: 4, a: '15deg' }, { sz: 4, a: '135deg' }, { sz: 4, a: '255deg' }] }, + { r: 340, d: '36s', rev: true, dots: [{ sz: 4, a: '75deg' }, { sz: 3, a: '195deg' }, { sz: 4, a: '315deg' }] }, ] as const; // 展开总长度,用于 stagger 相位 const totalOrbitDots = orbits.reduce((n, o) => n + o.dots.length, 0); diff --git a/src/styles/global.css b/src/styles/global.css index 29c6cfb..a628c8d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1805,7 +1805,7 @@ footer a { box-shadow: 0 0 8px rgba(255, 255, 255, 0.55), 0 0 18px rgba(210, 220, 255, 0.28); } .hero-orbit-dot.dot-white::before { - width: 44px; + width: 32px; background: linear-gradient( to left, rgba(255, 255, 255, 0.88) 0%, @@ -1833,7 +1833,7 @@ footer a { box-shadow: 0 0 8px rgba(120, 160, 255, 0.55), 0 0 20px rgba(61, 90, 254, 0.32); } .hero-orbit-dot.dot-blue::before { - width: 52px; + width: 36px; background: linear-gradient( to left, rgba(170, 198, 255, 0.9) 0%, @@ -1861,7 +1861,7 @@ footer a { box-shadow: 0 0 8px rgba(185, 155, 255, 0.55), 0 0 20px rgba(150, 110, 255, 0.30); } .hero-orbit-dot.dot-violet::before { - width: 48px; + width: 34px; background: linear-gradient( to left, rgba(220, 205, 255, 0.9) 0%, @@ -1889,7 +1889,7 @@ footer a { box-shadow: 0 0 8px rgba(255, 170, 205, 0.52), 0 0 20px rgba(255, 125, 180, 0.28); } .hero-orbit-dot.dot-pink::before { - width: 44px; + width: 32px; background: linear-gradient( to left, rgba(255, 215, 230, 0.9) 0%,