diff --git a/css/style.css b/css/style.css index 3a5e090..22a6916 100644 --- a/css/style.css +++ b/css/style.css @@ -154,10 +154,10 @@ body { } .hero-content h1 { - font-family: 'Orbitron', 'Noto Sans SC', 'Segoe UI', sans-serif; + font-family: 'Noto Serif SC', 'Fraunces', serif; font-size: 2.45rem; font-weight: 700; - letter-spacing: 0.03em; + letter-spacing: 0.01em; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } @@ -193,10 +193,10 @@ body { .hero-kicker { display: inline-block; - font-family: 'Orbitron', 'Noto Sans SC', sans-serif; - font-size: 0.95rem; - font-weight: 700; - letter-spacing: 0.35em; + font-family: 'JetBrains Mono', monospace; + font-size: 0.85rem; + font-weight: 500; + letter-spacing: 0.3em; text-transform: uppercase; color: var(--ice-blue-dim); margin-bottom: 14px; @@ -206,7 +206,7 @@ body { color: var(--ice-blue); margin-bottom: 0; text-shadow: 0 0 30px rgba(56, 189, 248, 0.25); - font-family: 'Orbitron', 'Noto Sans SC', sans-serif; + font-family: 'Noto Serif SC', serif; font-weight: 900; letter-spacing: 0.02em; } @@ -302,75 +302,207 @@ body { border-radius: 6px; } -/* 产品预览部分 */ -.products-preview { - padding: 80px 0; - background-color: var(--light-bg); +/* 向下滚动提示 */ +.scroll-cue { + position: absolute; + left: 60px; + bottom: 26px; + z-index: 2; + display: flex; + align-items: center; + gap: 12px; + color: rgba(207, 232, 255, 0.65); + font-family: 'JetBrains Mono', monospace; + font-size: 0.72rem; + letter-spacing: 0.22em; + text-transform: uppercase; } -.products-preview h2 { +.scroll-cue-line { + display: block; + width: 1px; + height: 34px; + background: linear-gradient(to bottom, rgba(207, 232, 255, 0.75), transparent); + animation: scrollCueMove 2.2s ease-in-out infinite; +} + +@keyframes scrollCueMove { + 0% { transform: scaleY(0.3); transform-origin: top; opacity: 0.4; } + 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } + 100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.4; } +} + +/* 关键词标记带 */ +.marquee-strip { + background: var(--rock-navy-0); + border-top: 1px solid rgba(156, 198, 236, 0.12); + border-bottom: 1px solid rgba(156, 198, 236, 0.12); + overflow: hidden; + white-space: nowrap; + padding: 14px 0; +} + +.marquee-track { + display: inline-flex; + align-items: center; + gap: 18px; + animation: marqueeScroll 26s linear infinite; + font-family: 'JetBrains Mono', monospace; + font-size: 0.85rem; + letter-spacing: 0.08em; + color: var(--ice-blue-dim); +} + +.marquee-track .dot { + color: var(--electric-blue); + opacity: 0.7; +} + +@keyframes marqueeScroll { + from { transform: translateX(0); } + to { transform: translateX(-50%); } +} + +@media (prefers-reduced-motion: reduce) { + .marquee-track { + animation: none; + } + + .scroll-cue-line { + animation: none; + } +} + +/* 分区通用：扫描线签名效果 + 深色岩层底色 */ +.reveal-section { + position: relative; + overflow: hidden; +} + +.section-scan { + position: absolute; + left: 0; + right: 0; + top: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--electric-blue), transparent); + box-shadow: 0 0 16px 2px rgba(56, 189, 248, 0.6); + pointer-events: none; + z-index: 5; + opacity: 0; +} + +.section-heading { text-align: center; - font-size: 2.5rem; - margin-bottom: 50px; - color: var(--primary-blue); + max-width: 640px; + margin: 0 auto 56px; +} + +.section-heading .eyebrow { + display: inline-block; + font-family: 'JetBrains Mono', monospace; + font-size: 0.78rem; + letter-spacing: 0.32em; + text-transform: uppercase; + color: var(--electric-blue); + margin-bottom: 14px; +} + +.section-heading h2 { + font-family: 'Noto Serif SC', serif; + font-weight: 900; + font-size: 2.3rem; + color: var(--ice-blue); + letter-spacing: 0.02em; +} + +/* 产品预览部分 —— 深色岩层卡片 */ +.products-preview { + padding: 110px 0; + background: + radial-gradient(ellipse 60% 50% at 85% 0%, rgba(56, 189, 248, 0.06), transparent 60%), + linear-gradient(180deg, var(--rock-navy-0) 0%, var(--rock-navy-1) 100%); } .preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; + perspective: 1200px; } .preview-card { - background: white; - padding: 22px; + position: relative; + background: linear-gradient(160deg, rgba(27, 44, 74, 0.55) 0%, rgba(10, 17, 32, 0.75) 100%); + padding: 30px 26px; + border-radius: 14px; + border: 1px solid rgba(156, 198, 236, 0.14); + backdrop-filter: blur(6px); + transition: border-color 0.3s, box-shadow 0.3s; + transform-style: preserve-3d; + will-change: transform; +} + +.preview-card.is-tilting, +.preview-card:hover { + border-color: rgba(56, 189, 248, 0.45); + box-shadow: 0 20px 40px rgba(2, 6, 14, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.08); +} + +.card-index { + position: absolute; + top: 22px; + right: 26px; + font-family: 'JetBrains Mono', monospace; + font-size: 0.85rem; + letter-spacing: 0.08em; + color: rgba(156, 198, 236, 0.45); +} + +.preview-image-wrap { + background: rgba(5, 7, 12, 0.6); border-radius: 10px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); - transition: all 0.3s; - border-top: 4px solid var(--primary-purple); + margin-bottom: 20px; + overflow: hidden; } .preview-image { width: 100%; height: 150px; object-fit: contain; - background: #f7f9fc; - border-radius: 8px; - margin-bottom: 18px; -} - -.preview-card:hover { - transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); + display: block; + padding: 10px; } .preview-card h3 { - font-size: 1.5rem; - margin-bottom: 15px; - color: var(--primary-blue); + font-family: 'Noto Serif SC', serif; + font-weight: 700; + font-size: 1.4rem; + margin-bottom: 12px; + color: var(--ice-blue); } .preview-card p { - color: var(--light-text); + color: rgba(207, 232, 255, 0.62); margin-bottom: 20px; font-size: 0.95rem; } .card-link { - color: var(--accent-color); + color: var(--electric-blue); text-decoration: none; font-weight: 600; transition: color 0.3s; } .card-link:hover { - color: #00a8cc; + color: var(--ice-blue); } -/* 学术与动态部分 */ +/* 学术与动态部分 —— 深色双栏 */ .academic-news { - padding: 80px 0; - background: white; + padding: 110px 0; + background: var(--rock-navy-1); } .section-row { @@ -379,53 +511,58 @@ body { gap: 50px; } -.section-col h2 { - font-size: 2rem; - margin-bottom: 30px; - color: var(--primary-purple); - border-bottom: 3px solid var(--accent-color); +.section-col h3 { + font-family: 'Noto Serif SC', serif; + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 26px; + color: var(--ice-blue); + border-bottom: 1px solid rgba(156, 198, 236, 0.25); padding-bottom: 15px; } .news-list { display: flex; flex-direction: column; - gap: 25px; + gap: 20px; } .news-item { padding: 20px; - border-left: 4px solid var(--primary-blue); - background: var(--light-bg); + border-left: 2px solid var(--electric-blue); + background: rgba(255, 255, 255, 0.03); border-radius: 5px; transition: all 0.3s; } .news-item:hover { - background: #e8f1ff; - transform: translateX(10px); + background: rgba(56, 189, 248, 0.08); + transform: translateX(8px); } .news-item h4 { margin-bottom: 8px; - color: var(--primary-blue); + color: var(--ice-blue); + font-weight: 600; } .news-item p { font-size: 0.9rem; - color: var(--light-text); + color: rgba(207, 232, 255, 0.55); margin-bottom: 10px; } +.news-item a, .read-more { - color: var(--accent-color); + color: var(--electric-blue); text-decoration: none; font-size: 0.9rem; transition: color 0.3s; } +.news-item a:hover, .read-more:hover { - color: #00a8cc; + color: var(--ice-blue); } /* 响应式设计 */ @@ -470,8 +607,9 @@ body { height: 55%; } - .products-preview h2 { - font-size: 2rem; + .products-preview h2, + .section-heading h2 { + font-size: 1.9rem; } .section-row { @@ -482,6 +620,14 @@ body { .preview-grid { grid-template-columns: 1fr; } + + .scroll-cue { + left: 20px; + } + + .marquee-track { + font-size: 0.75rem; + } } @media (max-width: 480px) { @@ -517,45 +663,55 @@ body { .home-video-section { - background: #f8fafc; - padding: 42px 20px; - border-bottom: 1px solid #e5ebf3; + background: var(--rock-navy-0); + padding: 100px 20px; } .home-video-layout { display: grid; grid-template-columns: minmax(260px, 0.75fr) 1.25fr; - gap: 28px; + gap: 40px; align-items: center; } .home-video-copy h2 { - color: var(--primary-blue); - font-size: 1.75rem; - margin-bottom: 12px; + font-family: 'Noto Serif SC', serif; + font-weight: 700; + color: var(--ice-blue); + font-size: 1.9rem; + margin-bottom: 14px; } .home-video-copy p { - color: #34405a; + color: rgba(207, 232, 255, 0.62); line-height: 1.8; - margin-bottom: 12px; + margin-bottom: 14px; } .section-kicker { display: inline-block; - color: var(--accent-color); + font-family: 'JetBrains Mono', monospace; + color: var(--electric-blue); font-weight: 700; - margin-bottom: 8px; - font-size: 0.9rem; + letter-spacing: 0.14em; + margin-bottom: 10px; + font-size: 0.85rem; +} + +.home-video-media { + position: relative; + border-radius: 12px; + padding: 1px; + background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(156, 198, 236, 0.08)); } .home-video-layout video { width: 100%; aspect-ratio: 16 / 9; display: block; - background: #0f172a; - border-radius: 8px; - box-shadow: 0 14px 30px rgba(16, 41, 79, 0.16); + background: #05070c; + border-radius: 11px; + box-shadow: 0 20px 45px rgba(2, 6, 14, 0.55); } @media (max-width: 768px) { diff --git a/index.html b/index.html index 47bce80..0787d7c 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ 海古纪生物科技 - 精准基因组学解决方案 - + @@ -102,12 +102,12 @@
- HYPER-GENE · 生命孪生体系 + HYPER‑GENE · 生命孪生体系

- 突破极限 - 生命从此被计算 + 突破极限 + 生命从此被计算

-
+
极低成本 高效 灵活 @@ -156,58 +156,104 @@
+ + - + + + -
+
+
-
+
南繁科研现场

海大南繁：走向世界的育种中心

通过视频了解海南大学南繁科研与育种创新基础，感受海古纪技术服务所依托的南繁产业场景。

更多视频 →
- +
+ +
-
+ +
+
-

我们的产品与服务

+
+ 产品与服务 +

我们的产品与服务

+
-
- AI生信科学家 +
+ 01 +
+ AI生信科学家 +

AI生信科学家

全自动、自规划的多组学分析智能体

了解更多 → -
+ -
- Hyper-seq技术 +
+ 02 +
+ Hyper-seq技术 +

Hyper-seq测序

极低成本、高效、灵活的DNA测序文库制备

了解更多 → -
+ -
- 全基因组重测序分析流程 +
+ 03 +
+ 全基因组重测序分析流程 +

全基因组重测序

高精度全基因组测序与分析服务

了解更多 → -
+
-
+
+
+
+ 知识与洞见 +

学术文献与最新动态

+
-
-

学术文献

+
+

学术文献

Hyper-seq 技术实现低成本全基因组数据采集

@@ -226,8 +272,8 @@
-
-

最新动态

+
+

最新动态

Hyper-seq 技术实现低成本全基因组数据采集

@@ -303,9 +349,13 @@
+ + + + diff --git a/js/animations.js b/js/animations.js new file mode 100644 index 0000000..f9929a4 --- /dev/null +++ b/js/animations.js @@ -0,0 +1,138 @@ +/** + * 首页动效编排 + * - Lenis 平滑滚动 + * - GSAP ScrollTrigger 驱动的分区揭示、扫描线签名效果 + * - 首屏加载时的标题错落浮现 + * - 产品卡片的 3D 悬浮跟随 + */ +(function () { + var prefersReducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + /* ---------- 1. Lenis 平滑滚动 ---------- */ + var lenis = null; + if (window.Lenis && !prefersReducedMotion) { + lenis = new Lenis({ + duration: 1.15, + easing: function (t) { return Math.min(1, 1.001 - Math.pow(2, -10 * t)); }, + smoothWheel: true, + wheelMultiplier: 1 + }); + + if (window.gsap && window.ScrollTrigger) { + lenis.on('scroll', ScrollTrigger.update); + gsap.ticker.add(function (time) { + lenis.raf(time * 1000); + }); + gsap.ticker.lagSmoothing(0); + } else { + requestAnimationFrame(function raf(time) { + lenis.raf(time); + requestAnimationFrame(raf); + }); + } + } + + /* ---------- 2. 首屏标题错落浮现 ---------- */ + var revealItems = document.querySelectorAll('[data-reveal-item]'); + if (window.gsap && revealItems.length) { + gsap.set(revealItems, { opacity: 0, y: 26 }); + gsap.to(revealItems, { + opacity: 1, + y: 0, + duration: 0.9, + ease: 'power3.out', + stagger: 0.16, + delay: 0.3 + }); + } + + if (!window.gsap || !window.ScrollTrigger) { + return; // 没有 GSAP 时，直接跳过滚动动效，保留静态可读的页面 + } + + gsap.registerPlugin(ScrollTrigger); + + /* ---------- 3. 分区揭示 + 扫描线签名效果 ---------- */ + document.querySelectorAll('.reveal-section').forEach(function (section) { + var revealTargets = section.querySelectorAll('.reveal-up'); + var scanLine = section.querySelector('.section-scan'); + + if (revealTargets.length) { + gsap.set(revealTargets, { opacity: 0, y: 40 }); + gsap.to(revealTargets, { + opacity: 1, + y: 0, + duration: 0.9, + ease: 'power3.out', + stagger: 0.14, + scrollTrigger: { + trigger: section, + start: 'top 78%', + once: true + } + }); + } + + if (scanLine) { + gsap.fromTo(scanLine, + { top: '0%', opacity: 0.9 }, + { + top: '100%', + opacity: 0, + duration: 1.1, + ease: 'power2.inOut', + scrollTrigger: { + trigger: section, + start: 'top 85%', + once: true + } + } + ); + } + }); + + /* ---------- 4. 产品卡片 3D 悬浮跟随 ---------- */ + document.querySelectorAll('.tilt-card').forEach(function (card) { + var bounds; + + card.addEventListener('mouseenter', function () { + bounds = card.getBoundingClientRect(); + card.classList.add('is-tilting'); + }); + + card.addEventListener('mousemove', function (e) { + if (!bounds) bounds = card.getBoundingClientRect(); + var px = (e.clientX - bounds.left) / bounds.width - 0.5; + var py = (e.clientY - bounds.top) / bounds.height - 0.5; + gsap.to(card, { + rotateX: py * -8, + rotateY: px * 10, + duration: 0.4, + ease: 'power2.out', + transformPerspective: 700 + }); + }); + + card.addEventListener('mouseleave', function () { + card.classList.remove('is-tilting'); + gsap.to(card, { rotateX: 0, rotateY: 0, duration: 0.6, ease: 'power3.out' }); + }); + }); + + /* ---------- 5. Hero logo 视差微动 ---------- */ + var heroLogo = document.querySelector('.hero-brand-logo'); + var hero = document.querySelector('.hero'); + if (heroLogo && hero && !prefersReducedMotion) { + hero.addEventListener('mousemove', function (e) { + var rect = hero.getBoundingClientRect(); + var px = (e.clientX - rect.left) / rect.width - 0.5; + var py = (e.clientY - rect.top) / rect.height - 0.5; + gsap.to(heroLogo, { + x: px * 14, + y: py * 10, + duration: 0.6, + ease: 'power2.out' + }); + }); + } +})();