六、具体示例与参考思路
6.1 首页引导区
全屏背景视频或动态图形，展示量化交易的动态场景，如数据流动、交易图表的实时变化。
.hero {
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(135deg, #1e3c72, #2a5298);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
background: url('data-flow.png') repeat;
animation: moveBackground 10s linear infinite;
opacity: 0.3;
}
@keyframes moveBackground {
from { transform: translate(0, 0); }
to { transform: translate(-50%, -50%); }
}
6.2 服务介绍模块
内容模块采用卡片式布局，每个卡片通过Flexbox实现自适应排列，在不同屏幕尺寸下保持整齐有序。
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.card {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
padding: 20px;
flex: 1 1 calc(33.333% - 40px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 15px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
.card {
flex: 1 1 calc(50% - 40px);
}
}
@media (max-width: 480px) {
.card {
flex: 1 1 100%;
}
}
6.3 互动按钮与动画
CTA按钮利用transition和:hover伪类，实现在鼠标悬停时颜色和大小的平滑变化。
.cta-button {
background: linear-gradient(45deg, #ff7e5f, #feb47b);
border: none;
border-radius: 50px;
color: #fff;
padding: 15px 30px;
font-size: 1.2em;
cursor: pointer;
transition: transform 0.3s ease, background 0.3s ease;
}
.cta-button:hover {
transform: scale(1.05);
background: linear-gradient(45deg, #ff6a00, #ee0979);
}
6.4 数据可视化的动态图表
数据可视化区域通过CSS3与JavaScript相结合，动态展示市场趋势与交易策略。
.chart {
position: relative;
width: 100%;
height: 400px;
background: #f5f5f5;
border-radius: 10px;
overflow: hidden;
}
.bar {
position: absolute;
bottom: 0;
width: 30px;
background: #2a5298;
animation: grow 1s ease forwards;
}
@keyframes grow {
from { height: 0; }
to { height: var(--bar-height); }
}