Browse Source

feat(Home): 方案A轨道优化:7圈→4圈22颗→12颗半径拉开65px等差,速度18→36s慢转,彗星拖尾44~52px缩至32~36px,转圈圈更优雅不拥挤

master
doublex001 3 months ago
parent
commit
2463141175
  1. 15
      src/components/Home.tsx
  2. 8
      src/styles/global.css

15
src/components/Home.tsx

@ -199,17 +199,14 @@ export default function Home({ locale }: { locale: Locale }) {
const news = t.news.items.slice(0, 3); const news = t.news.items.slice(0, 3);
// 环绕中央玻璃球的轨道粒子:7 圈 · 22 颗发光点(颜色 4 色循环) // 环绕中央玻璃球的轨道粒子:4 圈 · 12 颗发光点(颜色 4 色循环)
// 半径 110~275px,围绕玻璃球(半径约 100px)外侧公转,每颗分色 // 半径拉开 65px 等差间距,避免圈间拥挤;速度外慢内快(18→36s),视觉更优雅
const DOT_PALETTE = ['white', 'blue', 'violet', 'pink'] as const; const DOT_PALETTE = ['white', 'blue', 'violet', 'pink'] as const;
const orbits = [ 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: 145, d: '18s', rev: false, dots: [{ sz: 5, a: '15deg' }, { sz: 4, a: '135deg' }, { sz: 5, a: '255deg' }] },
{ r: 140, d: '14s', rev: true, dots: [{ sz: 5, a: '50deg' }, { sz: 4, a: '170deg' }, { sz: 5, a: '300deg' }] }, { r: 210, d: '24s', rev: true, dots: [{ sz: 5, a: '75deg' }, { sz: 4, a: '195deg' }, { sz: 5, a: '315deg' }] },
{ r: 170, d: '17s', rev: false, dots: [{ sz: 4, a: '0deg' }, { sz: 4, a: '95deg' }, { sz: 4, a: '210deg' }, { sz: 4, a: '305deg' }] }, { r: 275, d: '30s', rev: false, dots: [{ sz: 4, a: '15deg' }, { sz: 4, a: '135deg' }, { sz: 4, a: '255deg' }] },
{ r: 200, d: '20s', rev: true, dots: [{ sz: 4, a: '40deg' }, { sz: 3, a: '140deg' }, { sz: 3, a: '240deg' }, { sz: 4, a: '330deg' }] }, { r: 340, d: '36s', rev: true, dots: [{ sz: 4, a: '75deg' }, { sz: 3, a: '195deg' }, { sz: 4, a: '315deg' }] },
{ 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' }] },
] as const; ] as const;
// 展开总长度,用于 stagger 相位 // 展开总长度,用于 stagger 相位
const totalOrbitDots = orbits.reduce((n, o) => n + o.dots.length, 0); const totalOrbitDots = orbits.reduce((n, o) => n + o.dots.length, 0);

8
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); 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 { .hero-orbit-dot.dot-white::before {
width: 44px; width: 32px;
background: linear-gradient( background: linear-gradient(
to left, to left,
rgba(255, 255, 255, 0.88) 0%, 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); 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 { .hero-orbit-dot.dot-blue::before {
width: 52px; width: 36px;
background: linear-gradient( background: linear-gradient(
to left, to left,
rgba(170, 198, 255, 0.9) 0%, 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); 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 { .hero-orbit-dot.dot-violet::before {
width: 48px; width: 34px;
background: linear-gradient( background: linear-gradient(
to left, to left,
rgba(220, 205, 255, 0.9) 0%, 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); 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 { .hero-orbit-dot.dot-pink::before {
width: 44px; width: 32px;
background: linear-gradient( background: linear-gradient(
to left, to left,
rgba(255, 215, 230, 0.9) 0%, rgba(255, 215, 230, 0.9) 0%,

Loading…
Cancel
Save