diff --git a/src/components/Home.tsx b/src/components/Home.tsx index e519cfa..22e92d2 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -60,8 +60,8 @@ function HeroParticleCanvas() { particles = Array.from({ length: count }, () => ({ x: Math.random() * W, y: Math.random() * H, - vx: (Math.random() - 0.5) * 0.35, - vy: (Math.random() - 0.5) * 0.35, + vx: (Math.random() - 0.5) * 0.10, // 速度砍 71%,停止"游来游去"的感觉 + vy: (Math.random() - 0.5) * 0.10, r: Math.random() * 1.4 + 0.6, color: PALETTE[Math.floor(Math.random() * PALETTE.length)], alpha: Math.random() * 0.5 + 0.4, @@ -199,14 +199,15 @@ export default function Home({ locale }: { locale: Locale }) { const news = t.news.items.slice(0, 3); - // 环绕中央玻璃球的轨道粒子:4 圈 · 12 颗发光点(颜色 4 色循环) - // 半径拉开 65px 等差间距,避免圈间拥挤;速度外慢内快(18→36s),视觉更优雅 + // 环绕中央玻璃球的轨道粒子:4 圈 · 12 颗发光星芒(颜色 4 色循环) + // (方案B:用户不喜欢游来游去 → 已在 global.css 停掉公转和光晕漂浮,只保留呼吸闪烁) + // 半径 65px 等差,角度使用非机械等分(非 0/120/240),让分布更自然 const DOT_PALETTE = ['white', 'blue', 'violet', 'pink'] as const; const orbits = [ - { 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' }] }, + { r: 145, d: '18s', rev: false, dots: [{ sz: 5, a: '8deg' }, { sz: 4, a: '148deg' }, { sz: 5, a: '268deg' }] }, + { r: 210, d: '24s', rev: true, dots: [{ sz: 5, a: '62deg' }, { sz: 4, a: '188deg' }, { sz: 5, a: '308deg' }] }, + { r: 275, d: '30s', rev: false, dots: [{ sz: 4, a: '22deg' }, { sz: 4, a: '142deg' }, { sz: 4, a: '270deg' }] }, + { r: 340, d: '36s', rev: true, dots: [{ sz: 4, a: '78deg' }, { sz: 3, a: '200deg' }, { sz: 4, a: '322deg' }] }, ] 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 a628c8d..dbf302a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1942,6 +1942,67 @@ footer a { .hero-glow-orb { animation: none; } } +/* ===== 方案B:用户不喜欢"游来游去" → 全部停移动,保留呼吸闪烁 ===== */ +.hero-ring { + animation: none !important; +} +.hero-glow-orb { + animation: none !important; +} + +/* 轨道粒子:去掉彗星游动拖尾 → 改成静态"星芒放射"(4 向渐变光线) */ +.hero-orbit-dot::before, +.hero-ring.is-rev .hero-orbit-dot::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 220%; + height: 220%; + border-radius: 9999px; + background: + radial-gradient( + ellipse at 50% 50%, + rgba(255, 255, 255, 0.0) 0%, + rgba(255, 255, 255, 0.0) 28%, + rgba(255, 255, 255, 0.0) 100% + ); + pointer-events: none; +} +.hero-orbit-dot.dot-white::before { + background: + radial-gradient(circle at 50% 50%, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.45) 42%, rgba(255,255,255,0.0) 52%), + linear-gradient(to right, transparent 48%, rgba(255,255,255,0.35) 50%, transparent 52%), + linear-gradient(to bottom, transparent 48%, rgba(255,255,255,0.35) 50%, transparent 52%), + linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.22) 50%, transparent 52%), + linear-gradient(-45deg, transparent 48%, rgba(255,255,255,0.22) 50%, transparent 52%); +} +.hero-orbit-dot.dot-blue::before { + background: + radial-gradient(circle at 50% 50%, rgba(148,184,255,0.0) 30%, rgba(148,184,255,0.45) 42%, rgba(148,184,255,0.0) 52%), + linear-gradient(to right, transparent 48%, rgba(148,184,255,0.35) 50%, transparent 52%), + linear-gradient(to bottom, transparent 48%, rgba(148,184,255,0.35) 50%, transparent 52%), + linear-gradient(45deg, transparent 48%, rgba(148,184,255,0.22) 50%, transparent 52%), + linear-gradient(-45deg, transparent 48%, rgba(148,184,255,0.22) 50%, transparent 52%); +} +.hero-orbit-dot.dot-violet::before { + background: + radial-gradient(circle at 50% 50%, rgba(196,178,255,0.0) 30%, rgba(196,178,255,0.45) 42%, rgba(196,178,255,0.0) 52%), + linear-gradient(to right, transparent 48%, rgba(196,178,255,0.35) 50%, transparent 52%), + linear-gradient(to bottom, transparent 48%, rgba(196,178,255,0.35) 50%, transparent 52%), + linear-gradient(45deg, transparent 48%, rgba(196,178,255,0.22) 50%, transparent 52%), + linear-gradient(-45deg, transparent 48%, rgba(196,178,255,0.22) 50%, transparent 52%); +} +.hero-orbit-dot.dot-pink::before { + background: + radial-gradient(circle at 50% 50%, rgba(255,180,215,0.0) 30%, rgba(255,180,215,0.45) 42%, rgba(255,180,215,0.0) 52%), + linear-gradient(to right, transparent 48%, rgba(255,180,215,0.35) 50%, transparent 52%), + linear-gradient(to bottom, transparent 48%, rgba(255,180,215,0.35) 50%, transparent 52%), + linear-gradient(45deg, transparent 48%, rgba(255,180,215,0.22) 50%, transparent 52%), + linear-gradient(-45deg, transparent 48%, rgba(255,180,215,0.22) 50%, transparent 52%); +} + @media (max-width: 640px) { .hero-glow-orb { filter: blur(18px); opacity: 0.7; } }