/* ========================================================= 全局动效样式（首页动态效果） 零依赖：纯 CSS + 原生 IntersectionObserver（见 reveal.client.ts） ========================================================= */ /* ---------- 滚动渐显（Scroll Reveal） ---------- 初始隐藏仅在 JS 可用（）时生效，避免无 JS 时内容不可见； 元素进入视口由 reveal.client.ts 加 .is-visible 触发过渡。 */ .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } .js [data-reveal='left'] { transform: translateX(-40px); } .js [data-reveal='right'] { transform: translateX(40px); } .js [data-reveal='zoom'] { transform: scale(0.94); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* ---------- 首屏背景渐变流动 ---------- */ .anim-gradient { background-size: 200% 200%; animation: anim-gradient-shift 16s ease infinite; } @keyframes anim-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ---------- 漂浮柔光球 ---------- */ .anim-blob { position: absolute; border-radius: 9999px; filter: blur(46px); opacity: 0.5; pointer-events: none; animation: anim-float 9s ease-in-out infinite; } .anim-blob--2 { animation-duration: 13s; animation-direction: reverse; } @keyframes anim-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(14px, -26px, 0); } } /* ---------- CTA 按钮光泽扫过 ---------- */ .anim-shimmer { position: relative; overflow: hidden; } .anim-shimmer::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 45%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.5), transparent ); transform: translateX(-160%) skewX(-18deg); animation: anim-shimmer 3.4s ease-in-out infinite; } @keyframes anim-shimmer { 0% { transform: translateX(-160%) skewX(-18deg); } 60%, 100% { transform: translateX(280%) skewX(-18deg); } } /* ---------- 卡片 hover 增强：上浮 + 封面放大 ---------- */ .anim-card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .anim-card:hover { transform: translateY(-6px); } .anim-card-media { overflow: hidden; } .anim-card-media img { transition: transform 0.55s ease; } .anim-card:hover .anim-card-media img { transform: scale(1.06); } /* ---------- 无障碍：关闭所有动效 ---------- */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .anim-gradient, .anim-blob, .anim-shimmer::after { animation: none !important; } .anim-card, .anim-card-media img { transition: none !important; } .anim-card:hover { transform: none !important; } .anim-card:hover .anim-card-media img { transform: none !important; } }