融合磨砂玻璃与数字浪潮的科技感设计

融合磨砂玻璃与数字浪潮的科技感设计

色彩与渐变的冷峻之美

深蓝色与紫色的渐变交织，为页面奠定了稳重大气的基调。通过linear-gradient，色彩在视觉上流动，仿佛数据在网络间穿梭。

  body {
    background: linear-gradient(135deg, #0d47a1, #6a1b9a);
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
  }
        

半透明磨砂玻璃效果

利用backdrop-filter，实现界面元素的磨砂玻璃效果，增强层次感与现代感。半透明的设计让背景的色彩渐变若隐若现，营造出科技氛围。

  .glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
  }
        

动态粒子流动画背景

通过CSS动画和伪元素，模拟数据流动的粒子波动。@keyframes负责粒子的移动轨迹，动态背景象征着支付清算系统的数据浪潮。

  .particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: move 10s linear infinite;
  }

  @keyframes move {
    from {
      transform: translateY(0) translateX(0);
    }
    to {
      transform: translateY(-100vh) translateX(100vw);
    }
  }
        

固定导航栏与交互按钮

导航栏固定于顶部，确保用户在滚动页面时仍可便捷访问。亮橙色的按钮通过:hover伪类实现颜色变化，增强交互体验。

  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(13, 71, 161, 0.8);
    display: flex;
    justify-content: space-between;
    padding: 15px 30px;
    z-index: 1000;
  }

  .navbar button {
    background-color: #ff9800;
    border: none;
    padding: 10px 20px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .navbar button:hover {
    background-color: #e68900;
  }