量子梦航：科技与梦想的交汇点

色彩搭配：渐变与对比的完美融合

主色调采用深蓝色与紫色的渐变，象征科技与神秘感。荧光绿与霓虹蓝作为辅助色，用于强调关键元素。

.gradient-background {
    background: linear-gradient(135deg, #00264d, #6f00ff);
    color: #ffffff;
}

排版设计：简洁现代的无衬线字体

主标题使用 Roboto Bold 字体，确保清晰且具有科技感。

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 3rem;
}

布局结构：全屏滚动与网格布局

结合 Flexbox 和 CSS Grid 实现响应式布局，适配多种设备。

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

动画效果：增强沉浸感与互动体验

视差滚动、粒子动画等技术提升了用户的沉浸感。

.parallax {
    background-image: url('background.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

图像与图标：抽象图形与科技元素

量子模拟器模块

虚拟现实体验

教育课程模块

材质与纹理：透明玻璃质感的实现

通过半透明背景和模糊滤镜实现玻璃质感。

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

响应式设计：优化性能与加载速度

媒体查询确保在各种设备上的一致性。

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .grid {
        grid-template-columns: 1fr;
    }
}