<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>材料数据分析平台</title>
<style>
:root {
--primary-blue: #0066cc;
--electric-blue: #00aaff;
--dark-bg: #121212;
--light-text: #ffffff;
--dark-text: #2d3748;
--gray-bg: rgba(247, 250, 252, 0.9);
--section-padding: 100px 0;
--border-radius: 12px;
--box-shadow: 0 10px 25px rgba(0, 102, 204, 0.15);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'PingFang SC', sans-serif;
}
body {
color: var(--dark-text);
line-height: 1.7;
overflow-x: hidden;
}
/* 粒子背景容器 */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(135deg, #121212 0%, #1a365d 100%);
}
/* 内容容器 */
.content-wrapper {
position: relative;
background-color: rgba(247, 250, 252, 0.85);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
position: relative;
}
/* 动态导航栏 */
.navbar {
background: linear-gradient(135deg, rgba(18, 18, 18, 0.9), rgba(26, 54, 93, 0.9));
padding: 20px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.4s;
backdrop-filter: blur(5px);
}
.navbar.scrolled {
background: rgba(18, 18, 18, 0.95);
padding: 15px 0;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 45px;
transition: transform 0.3s;
}
.logo:hover img {
transform: scale(1.05);
}
.nav-links {
display: flex;
gap: 30px;
}
.nav-link {
color: var(--light-text);
text-decoration: none;
font-weight: 500;
font-size: 16px;
padding: 8px 0;
position: relative;
transition: all 0.3s;
}
.nav-link::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: var(--electric-blue);
transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-link:hover {
color: var(--electric-blue);
}
.nav-link:hover::before {
width: 100%;
}
/* 动态英雄区域 */
.hero-section {
color: var(--light-text);
padding: 180px 0 120px;
position: relative;
background: linear-gradient(135deg, rgba(18, 18, 18, 0.7), rgba(26, 54, 93, 0.7));
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 60px;
}
.hero-text {
flex: 1;
animation: fadeInUp 0.8s ease-out;
}
.hero-image {
flex: 1;
position: relative;
animation: fadeInRight 0.8s ease-out;
}
.hero-image img {
width: 100%;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
transform: perspective(1000px) rotateY(-10deg);
transition: transform 0.5s;
}
.hero-image:hover img {
transform: perspective(1000px) rotateY(0deg);
}
.hero-title {
font-size: 48px;
margin-bottom: 25px;
font-weight: 700;
line-height: 1.2;
background: linear-gradient(to right, #fff 0%, var(--electric-blue) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
font-size: 20px;
margin-bottom: 40px;
line-height: 1.6;
opacity: 0.9;
max-width: 600px;
}
.cta-buttons {
display: flex;
gap: 20px;
margin-top: 30px;
}
.cta-btn {
padding: 15px 35px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.4s;
text-align: center;
border: none;
position: relative;
overflow: hidden;
}
.primary-btn {
background: linear-gradient(135deg, var(--primary-blue), var(--electric-blue));
color: var(--light-text);
box-shadow: 0 5px 15px rgba(0, 102, 204, 0.4);
}
.primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 150, 255, 0.6);
}
.primary-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--electric-blue), var(--primary-blue));
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}
.primary-btn:hover::after {
opacity: 1;
}
.secondary-btn {
background-color: transparent;
color: var(--light-text);
border: 2px solid var(--electric-blue);
}
.secondary-btn:hover {
background-color: rgba(0, 170, 255, 0.1);
transform: translateY(-3px);
}
/* 功能模块区域 - 垂直平铺布局 */
.features-section {
padding: var(--section-padding);
background-color: var(--gray-bg);
position: relative;
}
.section-title {
text-align: center;
font-size: 36px;
margin-bottom: 60px;
color: var(--primary-blue);
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(to right, var(--primary-blue), var(--electric-blue));
border-radius: 2px;
}
.vertical-features {
max-width: 900px;
margin: 0 auto;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 60px;
background-color: white;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
transition: all 0.4s;
}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 102, 204, 0.2);
}
.feature-icon-container {
flex: 0 0 120px;
background: linear-gradient(135deg, var(--primary-blue), var(--electric-blue));
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 30px;
color: white;
font-size: 50px;
}
.feature-content {
flex: 1;
padding: 30px;
}
.feature-title {
font-size: 24px;
margin-bottom: 15px;
color: var(--primary-blue);
}
.feature-description {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.detail-link {
color: var(--electric-blue);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.3s;
}
.detail-link::after {
content: '→';
margin-left: 8px;
transition: transform 0.3s;
}
.detail-link:hover {
color: var(--primary-blue);
}
.detail-link:hover::after {
transform: translateX(5px);
}
/* 3D展示区域 */
.showcase-section {
padding: var(--section-padding);
background: linear-gradient(135deg, rgba(18, 18, 18, 0.7), rgba(26, 54, 93, 0.7));
color: var(--light-text);
position: relative;
}
.showcase-container {
display: flex;
align-items: center;
gap: 60px;
}
.showcase-image {
flex: 1;
position: relative;
perspective: 1000px;
}
.showcase-image img {
width: 100%;
border-radius: var(--border-radius);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
transform: rotateY(-15deg);
transition: transform 0.5s;
border: 1px solid rgba(255,255,255,0.1);
}
.showcase-image:hover img {
transform: rotateY(0deg);
}
.showcase-content {
flex: 1;
}
.showcase-title {
font-size: 36px;
margin-bottom: 25px;
background: linear-gradient(to right, #fff 0%, var(--electric-blue) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.showcase-description {
font-size: 18px;
margin-bottom: 30px;
opacity: 0.9;
line-height: 1.8;
}
/* 底部区域 */
.footer {
background: linear-gradient(135deg, rgba(18, 18, 18, 0.9), rgba(26, 54, 93, 0.9));
color: var(--light-text);
padding: 80px 0 30px;
position: relative;
}
.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
margin-bottom: 50px;
}
.footer-logo {
margin-bottom: 20px;
}
.footer-logo img {
height: 40px;
}
.footer-about {
max-width: 300px;
}
.footer-about p {
margin-bottom: 20px;
opacity: 0.8;
}
.social-links {
display: flex;
gap: 15px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255,255,255,0.1);
transition: all 0.3s;
}
.social-link:hover {
background-color: var(--electric-blue);
transform: translateY(-3px);
}
.footer-links-group h3 {
font-size: 18px;
margin-bottom: 20px;
color: var(--electric-blue);
}
.footer-links {
list-style: none;
}
.footer-link {
margin-bottom: 12px;
}
.footer-link a {
color: var(--light-text);
text-decoration: none;
opacity: 0.8;
transition: all 0.3s;
position: relative;
padding-left: 15px;
}
.footer-link a::before {
content: '›';
position: absolute;
left: 0;
color: var(--electric-blue);
transition: transform 0.3s;
}
.footer-link a:hover {
opacity: 1;
color: var(--electric-blue);
padding-left: 20px;
}
.footer-link a:hover::before {
transform: translateX(3px);
}
.copyright {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 14px;
opacity: 0.6;
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 响应式设计 */
@media (max-width: 992px) {
.hero-content,
.showcase-container {
flex-direction: column;
text-align: center;
}
.hero-text {
margin-bottom: 50px;
}
.hero-title,
.showcase-title {
font-size: 36px;
}
.hero-subtitle,
.showcase-description {
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
justify-content: center;
}
.feature-item {
flex-direction: column;
}
.feature-icon-container {
width: 100%;
flex: none;
padding: 20px;
}
}
@media (max-width: 768px) {
.nav-links {
gap: 20px;
}
.hero-title,
.section-title,
.showcase-title {
font-size: 28px;
}
.hero-subtitle {
font-size: 16px;
}
.feature-content {
padding: 25px;
}
.footer-container {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-about {
max-width: 100%;
}
}
@media (max-width: 576px) {
.nav-links {
display: none;
}
.hero-section {
padding: 120px 0 80px;
}
.cta-buttons {
flex-direction: column;
gap: 15px;
}
.cta-btn {
width: 100%;
}
.feature-item {
margin-bottom: 40px;
}
}
</style>
</head>
<body>
<!-- 粒子背景容器 -->
<div id="particles-js"></div>
<!-- 内容容器 -->
<div class="content-wrapper">
<!-- 动态导航栏 -->
<nav class="navbar" id="navbar">
<div class="container">
<div class="logo">
<img src="https://via.placeholder.com/150x40?text=Material+AI+Lab" alt="材料数据分析平台">
</div>
<div class="nav-links">
<a href="#" class="nav-link">首页</a>
<a href="#features" class="nav-link">设计辅助</a>
<a href="#features" class="nav-link">智能选材</a>
<a href="#features" class="nav-link">性能预测</a>
<a href="#features" class="nav-link">工艺推荐</a>
<a href="#showcase" class="nav-link">寿命评估</a>
</div>
</div>
</nav>
<!-- 动态英雄区域 -->
<section class="hero-section">
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">为材料设计与分析打造的智能解决方案</h1>
<p class="hero-subtitle">
材料数据分析平台®和云产品开发解决方案深受全球创新者信赖，能够创造、协作以及提供出色的材料性能体验。
</p>
<div class="cta-buttons">
<button class="cta-btn primary-btn">联系我们</button>
<button class="cta-btn secondary-btn">产品演示</button>
</div>
</div>
<div class="hero-image">
<img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="材料分析界面">
</div>
</div>
</section>
<!-- 功能模块区域 -->
<section id="features" class="features-section">
<div class="container">
<h2 class="section-title">核心功能模块</h2>
<div class="vertical-features">
<!-- 设计辅助 -->
<div class="feature-item">
<div class="feature-icon-container">
<span>🧪</span>
</div>
<div class="feature-content">
<h3 class="feature-title">设计辅助</h3>
<p class="feature-description">
分子结构编辑与AI优化建议系统，支持分子量范围、能隙范围等参数设定，实时生成性能分析雷达图和稳定性趋势预测。我们的系统整合了量子化学计算和机器学习算法，能够为新材料设计提供智能建议，显著提高研发效率。
</p>
<a href="#" class="detail-link">探索更多</a>
</div>
</div>
<!-- 智能选材 -->
<div class="feature-item">
<div class="feature-icon-container">
<span>🔍</span>
</div>
<div class="feature-content">
<h3 class="feature-title">智能选材</h3>
<p class="feature-description">
基于328种材料数据库的智能匹配系统，支持机械性能、物理性能等多维度筛选，提供AI决策解释和替代方案分析。系统整合了材料基因组计划数据，能够根据应用场景推荐最优材料组合，降低选材错误率高达60%。
</p>
<a href="#" class="detail-link">探索更多</a>
</div>
</div>
<!-- 性能预测 -->
<div class="feature-item">
<div class="feature-icon-container">
<span>📊</span>
</div>
<div class="feature-content">
<h3 class="feature-title">性能预测</h3>
<p class="feature-description">
元素配比实验与虚拟熔炼系统，结合TTT曲线控制，预测材料强度分布、晶体生长和服役性能。我们的预测模型准确率高达92%，可大幅减少实验次数和开发成本，平均缩短研发周期40%。
</p>
<a href="#" class="detail-link">探索更多</a>
</div>
</div>
<!-- 工艺推荐 -->
<div class="feature-item">
<div class="feature-icon-container">
<span>⚙️</span>
</div>
<div class="feature-content">
<h3 class="feature-title">工艺推荐</h3>
<p class="feature-description">
配方优化与工艺路线控制系统，提供熔炼、冷却和时效处理的智能参数推荐，包含成品率预测和成本分析。系统整合了20年工艺经验数据，可优化生产流程，提高良品率15%以上，降低能耗20%。
</p>
<a href="#" class="detail-link">探索更多</a>
</div>
</div>
<!-- 寿命评估 -->
<div class="feature-item">
<div class="feature-icon-container">
<span>⏳</span>
</div>
<div class="feature-content">
<h3 class="feature-title">寿命评估</h3>
<p class="feature-description">
材料参数设置与寿命预测系统，展示晶粒尺寸、安全间隔值等关键指标，提供失效模式分析和优化建议。我们的预测模型考虑了环境因素和载荷条件，可准确预测材料在不同工况下的使用寿命，误差率低于8%。
</p>
<a href="#" class="detail-link">探索更多</a>
</div>
</div>
</div>
</div>
</section>
<!-- 3D展示区域 -->
<section id="showcase" class="showcase-section">
<div class="container">
<div class="showcase-container">
<div class="showcase-image">
<img src="https://images.unsplash.com/photo-1581093196278-c1f6d9d00a6f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="材料分析展示">
</div>
<div class="showcase-content">
<h2 class="showcase-title">初次体验材料数据分析平台</h2>
<p class="showcase-description">
材料数据分析平台以其功能强大且用户友好的界面而闻名，是助您又快又好地完成工作的理想解决方案。
</p>
<p class="showcase-description">
观看相关视频，了解分子设计、性能预测等核心功能、用于金属合金和高分子材料的行业专用工具，以及人工智能、专为材料分析设计的云存储和协作等新一代功能。
</p>
<button class="cta-btn primary-btn">了解更多信息</button>
</div>
</div>
</div>
</section>
<!-- 底部区域 -->
<footer class="footer">
<div class="container">
<div class="footer-container">
<div class="footer-about">
<div class="footer-logo">
<img src="https://via.placeholder.com/150x40?text=Material+AI+Lab" alt="材料数据分析平台">
</div>
<p>材料数据分析平台®和云产品开发解决方案深受全球创新者信赖，能够创造、协作以及提供出色的材料性能体验。</p>
<div class="social-links">
<a href="#" class="social-link">📱</a>
<a href="#" class="social-link">💻</a>
<a href="#" class="social-link">📧</a>
<a href="#" class="social-link">🔗</a>
</div>
</div>
<div class="footer-links-group">
<h3>产品</h3>
<ul class="footer-links">
<li class="footer-link"><a href="#">设计辅助</a></li>
<li class="footer-link"><a href="#">智能选材</a></li>
<li class="footer-link"><a href="#">性能预测</a></li>
<li class="footer-link"><a href="#">工艺推荐</a></li>
<li class="footer-link"><a href="#">寿命评估</a></li>
</ul>
</div>
<div class="footer-links-group">
<h3>资源</h3>
<ul class="footer-links">
<li class="footer-link"><a href="#">文档中心</a></li>
<li class="footer-link"><a href="#">视频教程</a></li>
<li class="footer-link"><a href="#">案例研究</a></li>
<li class="footer-link"><a href="#">API文档</a></li>
</ul>
</div>
<div class="footer-links-group">
<h3>公司</h3>
<ul class="footer-links">
<li class="footer-link"><a href="#">关于我们</a></li>
<li class="footer-link"><a href="#">联系我们</a></li>
<li class="footer-link"><a href="#">人才招聘</a></li>
<li class="footer-link"><a href="#">新闻中心</a></li>
</ul>
</div>
</div>
<div class="copyright">
© 2023 材料数据分析平台 版权所有 | 京ICP备XXXXXXXX号
</div>
</div>
</footer>
</div>
<!-- 粒子效果库 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// 初始化粒子效果
document.addEventListener('DOMContentLoaded', function() {
particlesJS('particles-js', {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#00aaff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": true,
"speed": 2,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#0066cc",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
// 点击效果增强
document.addEventListener('click', function(e) {
const particles = window.pJSDom[0].pJS.particles;
const pushAmount = 10;
// 创建波纹效果
for (let i = 0; i < particles.array.length; i++) {
const p = particles.array[i];
const dx = p.x - e.clientX;
const dy = p.y - e.clientY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 200) {
const angle = Math.atan2(dy, dx);
const force = (200 - distance) / 20;
p.vx = force * Math.cos(angle) * 2;
p.vy = force * Math.sin(angle) * 2;
}
}
});
});
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// 功能项动画
const featureItems = document.querySelectorAll('.feature-item');
featureItems.forEach((item, index) => {
item.style.transitionDelay = `${index * 0.1}s`;
});
</script>
</body>
</html>
index.html
style.css
index.js
index.html