Browse Source

feat(Home): 首屏蒙层暗化方案A:叠加55%深蓝渐变蒙层,激活Canvas粒子网/光晕/4色轨道彗星全部显形,文字对比度增强

master
doublex001 3 months ago
parent
commit
c255d4fc21
  1. 21
      src/components/Home.tsx

21
src/components/Home.tsx

@ -174,7 +174,7 @@ function HeroParticleCanvas() {
ref={ref} ref={ref}
aria-hidden="true" aria-hidden="true"
className="absolute inset-0 w-full h-full pointer-events-none" className="absolute inset-0 w-full h-full pointer-events-none"
style={{ zIndex: 2 }} style={{ zIndex: 3 }}
/> />
); );
} }
@ -231,13 +231,24 @@ export default function Home({ locale }: { locale: Locale }) {
alt="" alt=""
aria-hidden="true" aria-hidden="true"
className="absolute inset-0 w-full h-full object-cover" className="absolute inset-0 w-full h-full object-cover"
style={{ zIndex: 0, opacity: 0.92 }} style={{ zIndex: 0 }}
loading="eager" loading="eager"
decoding="async" decoding="async"
/> />
{/* 方案A:半透明深色蒙层 → 让粒子/光晕从浅色背景中"显形",同时增强左下白字对比度 */}
<div
aria-hidden="true"
className="absolute inset-0 pointer-events-none"
style={{
zIndex: 1,
background:
'linear-gradient(135deg, rgba(10, 14, 42, 0.62) 0%, rgba(20, 24, 47, 0.54) 50%, rgba(29, 33, 80, 0.50) 100%)',
}}
/>
{/* 雾化光晕 4 球(慢速漂浮,最底层之上但粒子网之下) */} {/* 雾化光晕 4 球(慢速漂浮,最底层之上但粒子网之下) */}
<div aria-hidden="true" className="absolute inset-0 pointer-events-none" style={{ zIndex: 1, overflow: 'hidden' }}> <div aria-hidden="true" className="absolute inset-0 pointer-events-none" style={{ zIndex: 2, overflow: 'hidden' }}>
{HERO_GLOW_ORBS.map((o, i) => ( {HERO_GLOW_ORBS.map((o, i) => (
<span <span
key={i} key={i}
@ -254,11 +265,11 @@ export default function Home({ locale }: { locale: Locale }) {
))} ))}
</div> </div>
{/* Canvas 全屏粒子 + 邻近连线(白/蓝/紫/粉 4 色) */} {/* Canvas 全屏粒子 + 邻近连线(白/蓝/紫/粉 4 色),z-index:3 */}
<HeroParticleCanvas /> <HeroParticleCanvas />
{/* 粒子层:环绕中央玻璃球的轨道粒子(7 圈 / 22 颗,4 色分色,linear 匀速环绕) */} {/* 粒子层:环绕中央玻璃球的轨道粒子(7 圈 / 22 颗,4 色分色,linear 匀速环绕) */}
<div className="hero-orbit pointer-events-none" aria-hidden="true" style={{ left: '70%', top: '46%', zIndex: 3 }}> <div className="hero-orbit pointer-events-none" aria-hidden="true" style={{ left: '70%', top: '46%', zIndex: 4 }}>
{orbits.flatMap((o, i) => {orbits.flatMap((o, i) =>
o.dots.map((d, j) => { o.dots.map((d, j) => {
// 全局 dot 序号,用于 stagger 脉冲相位 + 颜色循环 // 全局 dot 序号,用于 stagger 脉冲相位 + 颜色循环

Loading…
Cancel
Save