全屏沉浸式支付清算系统，科技感与安全性的完美融合

一、色彩与视觉设计

页面采用深蓝色作为主背景色，营造出冷峻且专业的氛围。搭配紫色和霓虹绿色的点缀色，增强视觉层次感，营造未来科技感的整体视觉效果。

颜色用途	颜色代码
背景色	#1E2B4F
点缀色	#7C3AED, #56D681


body {
  background-color: #1E2B4F;
  color: #FFFFFF;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

二、动态粒子背景

动态粒子效果通过CSS3动画实现，粒子在页面上自由移动，象征着支付网络的复杂与动态性。利用@keyframes控制粒子的运动轨迹和透明度变化，营造流动的视觉效果。


.particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: moveParticles 15s linear infinite;
}

@keyframes moveParticles {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(1000px, 1000px);
    opacity: 0;
  }
}

三、渐变色按钮与交互效果

主要操作按钮如"立即支付"采用linear-gradient实现渐变填充，赋予按钮立体感。在悬停时，通过transition平滑过渡颜色，增强用户的互动体验。


.button-primary {
  background: linear-gradient(45deg, #7C3AED, #56D681);
  border: none;
  border-radius: 25px;
  padding: 12px 24px;
  color: #FFFFFF;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.button-primary:hover {
  background: linear-gradient(45deg, #56D681, #7C3AED);
}

四、模块化布局与网格系统

采用CSS Grid实现模块化网格布局，确保内容分块清晰、整齐。主内容区域居中显示，两侧留白以突出重点信息。通过grid-template-columns定义网格结构，适应不同屏幕尺寸，实现响应式设计。


.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 20px;
  padding: 40px;
}

.main-content {
  grid-column: 2 / 3;
}

五、数据流动画与3D效果

数据流动通过animation和transform属性实现动态效果，模拟数据在支付网络中的传输。结合perspective与rotateY等3D转换，增强页面的立体感与视觉冲击力。


.data-flow {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.flow-line {
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, #56D681, #7C3AED);
  animation: flow 10s linear infinite;
}

@keyframes flow {
  0% {
    transform: translateX(0) rotateY(0);
  }
  100% {
    transform: translateX(100%) rotateY(360deg);
  }
}

.three-d-element {
  transform: perspective(600px) rotateY(45deg);
  transition: transform 0.5s;
}

.three-d-element:hover {
  transform: perspective(600px) rotateY(0deg);
}

六、导航栏的透明渐变设计

顶部导航栏采用rgba实现透明渐变背景，随着用户滚动页面，背景逐渐过渡为实色，确保导航栏在不同滚动状态下的可视性与一致性。通过position: fixed固定导航栏，提升用户操作的便捷性。


.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 15px 30px;
  background: rgba(30, 43, 79, 0.7);
  transition: background 0.4s ease;
  z-index: 1000;
}

.navbar.scrolled {
  background: #1E2B4F;
}

七、页面加载与转场动画

页面加载时，利用粒子汇聚动画吸引用户注意力，逐步展现核心内容。转场过程中，opacity与transition实现淡入淡出效果，使不同页面间的过渡更加自然流畅，提升整体用户体验。


.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1E2B4F;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeOut 2s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.page-transition {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page-transition.active {
  opacity: 1;
}

八、响应式设计与跨设备兼容性

通过媒体查询，调整布局与元素尺寸，确保在不同设备上均有优质的视觉与操作体验。无论是桌面端还是移动端，页面结构自适应变化，保持内容的可读性与交互性的平衡。


@media (max-width: 1024px) {
  .container {
    grid-template-columns: 1fr 2fr 1fr;
  }
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  
  .button-primary {
    width: 100%;
    padding: 10px 0;
  }
}