融合自然与科技的支付清算系统

/* 背景渐变 */
body {
  background: linear-gradient(135deg, #C6E2B5 0%, #F5F5DC 100%);
}

/* 按钮渐变与悬停效果 */
.button {
  background: linear-gradient(45deg, #0074D9, #B3C0C8);
  transition: background 0.3s ease, transform 0.3s ease;
}

.button:hover {
  background: linear-gradient(45deg, #005bb5, #909aae);
  transform: scale(1.05);
}
          

/* 顶部导航栏固定 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  background-color: #F5F5DC;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 网格布局 */
.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 100px 20px 20px 20px;
}
          

/* 按钮悬停动画 */
.button:hover {
  background: linear-gradient(45deg, #005bb5, #909aae);
  transform: scale(1.05);
}

/* 滚动淡入效果 */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
          

/* 响应式设计 */
@media (max-width: 768px) {
  .content {
    grid-template-columns: 1fr;
  }
}

/* 视差滚动效果 */
.parallax {
  background-image: url('background.jpg');
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
          

/* 手绘图标样式 */
.icon {
  width: 50px;
  height: 50px;
  fill: #0074D9;
  transition: fill 0.3s ease;
}

.icon:hover {
  fill: #005bb5;
}

/* 数据流动效 */
.data-flow {
  animation: flow 5s infinite linear;
}

@keyframes flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
          

/* CSS变量定义 */
:root {
  --primary-color: #0074D9;
  --secondary-color: #B3C0C8;
  --background-light: #C6E2B5;
  --background-beige: #F5F5DC;
}

/* 应用CSS变量 */
.button {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
}

body {
  background: linear-gradient(135deg, var(--background-light) 0%, var(--background-beige) 100%);
}