Browse Source

feat(Home): 方案B停游动:轨道公转+光晕漂浮animation:none,彗星拖尾→十字+对角星芒放射,Canvas速度0.35→0.10砍71%,角度错相位自然分布

master
doublex001 3 months ago
parent
commit
2265500564
  1. 17
      src/components/Home.tsx
  2. 61
      src/styles/global.css

17
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);

61
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; }
}

Loading…
Cancel
Save