视觉与色彩的精妙运用

色彩是网页设计的灵魂。采用核心色调科技蓝，搭配银灰色，传递出现代感与可靠性的同时，用亮黄色点缀关键信息，吸引用户的视线。通过线性渐变色的背景处理，不仅增强了视觉深度，更为页面注入了动态的生命力。


/* 颜色变量定义 */
:root {
    --tech-blue: #0074D9;
    --silver-gray: #BDC3C7;
    --bright-yellow: #F1C40F;
}

/* 背景渐变 */
body {
    background: linear-gradient(135deg, var(--tech-blue), var(--silver-gray));
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

科技蓝主色调

传递专业与信任感

银灰辅助色

增强现代感与层次

亮黄点缀色

突出关键信息

视差滚动的深度体验

视差滚动技术通过背景与前景元素的不同比例移动，营造出视觉上的层次感与深度感。利用CSS3的transform与transition属性，实现平滑且富有动感的滚动效果。


/* 视差背景样式 */
.parallax {
    background-image: url('assets/background.jpg');
    height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateZ(0);
    transition: transform 0.5s ease-out;
}

/* 滚动时背景偏移 */
.parallax.scrolled {
    transform: translateY(-50px);
}

3D插画与动画的融合

3D插画为网页增添了动感与立体感，通过transform: rotate3d与animation属性，使插画在用户滚动时缓缓旋转，展现出智能制造设备与支付清算系统的核心功能，增强了视觉的互动性。


/* 3D插画容器 */
.illustration {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 1s;
    width: 300px;
    height: 300px;
    margin: auto;
}

/* 激活动画 */
.illustration.active {
    transform: rotate3d(1, 1, 0, 45deg);
}

/* 持续旋转动画 */
@keyframes rotate {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

.illustration.animate {
    animation: rotate 10s linear infinite;
}

分屏布局与数据流动的表现

通过flexbox实现的分屏布局，将智能制造与支付清算系统并列展示。左侧强调智能制造场景，右侧聚焦支付清算系统。使用高清摄影图结合抽象图形，通过animation模拟数据流动，形象地表现技术间的连接与协同。


/* 分屏布局容器 */
.split-screen {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

/* 左右区域样式 */
.left, .right {
    flex: 1;
    padding: 2rem;
    position: relative;
}

/* 数据流动效果 */
.data-flow {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0074D9, #F1C40F, #BDC3C7);
    background-size: 200% 100%;
    animation: flow 3s infinite;
    margin-top: 1rem;
}

@keyframes flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

字体与微动效的设计

选用Roboto作为主字体，保证了文字的清晰与现代感。在标题上添加微动效，当用户悬停时，文字呈现轻微闪烁效果，通过animation与opacity属性，增加趣味性与互动性。


/* 字体设定 */
body {
    font-family: 'Roboto', sans-serif;
}

/* 标题的微动效 */
h3 {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

h3:hover {
    animation: flicker 0.5s infinite;
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

信息层次与可折叠区域

为了确保页面内容的简洁与易读，通过max-height与overflow属性实现内容的可折叠区域。结合transition使展开与收起过程更加平滑，用户可以根据需要查看详细信息，页面保持整洁有序。


/* 可折叠按钮样式 */
.collapsible {
    background-color: #BDC3C7;
    color: #0074D9;
    cursor: pointer;
    padding: 1rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: background-color 0.3s ease;
    font-size: 1.2rem;
}

.collapsible.active, .collapsible:hover {
    background-color: #F1C40F;
    color: #fff;
}

/* 可折叠内容样式 */
.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #f1f1f1;
    padding: 0 1rem;
}

.collapsible.active + .content {
    max-height: 500px; /* 根据内容调整 */
    padding: 1rem;
}