导航栏优化

hongjli

2025-04-05 846f92d2fe08ab9b8b14e8b949f00bb4529974d2

 src/app/globals.css

@@ -1,8 +1,18 @@
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
  /* 现代科技感主题配色 */
  --ai-primary: #1E2B63;       /* 深蓝色 - 主要背景色 */
  --ai-secondary: #6ADBFF;     /* 天蓝色 - 点缀色调 */
  --ai-accent: #5E72EB;        /* 紫蓝色 - 强调色调 */
  --ai-highlight: #FF9190;     /* 粉红色 - 高亮色调 */
  --ai-surface: #F7F9FF;       /* 淡蓝白色 - 提供清晰视觉空间 */
  --ai-dark: #0A1033;          /* 深蓝色 - 暗色调 */
  --ai-contrast: #FF6A88;      /* 粉红色 - 用于行动点强调 */
  
  /* 基础颜色设置 */
  --background: var(--ai-surface);
  --foreground: #1E2B63;
}

@theme inline {
@@ -14,13 +24,160 @@

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --background: var(--ai-dark);
    --foreground: #E9EFFD;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

/* 导航栏特效样式 */
.hover\:shadow-glow:hover {
  box-shadow: 0 0 15px rgba(106, 219, 255, 0.5);
}

/* Logo圆环脉冲动画 */
@keyframes logo-ring-pulse {
  0% {
    opacity: 0.15;
    box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15);
  }
  25% {
    opacity: 0.35;
    box-shadow: 0 0 0 1px rgba(136, 219, 255, 0.2);
  }
  50% {
    opacity: 0.65;
    box-shadow: 0 0 0 2px rgba(136, 219, 255, 0.25);
  }
  75% {
    opacity: 0.35;
    box-shadow: 0 0 0 1px rgba(136, 219, 255, 0.2);
  }
  100% {
    opacity: 0.15;
    box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15);
  }
}

.animate-logo-pulse {
  animation: logo-ring-pulse 6s ease-in-out infinite;
}

/* AI数据流效果动画 */
@keyframes dataflowY {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes dataflowX {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.animate-dataflowY {
  animation: dataflowY 3s infinite;
}

.animate-dataflowX {
  animation: dataflowX 4s infinite;
}

/* 按钮倾斜动画 */
@keyframes tilt {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}

.animate-tilt {
  animation: tilt 10s ease-in-out infinite;
}

/* AI元素扫描线动画 */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.animate-scanline {
  animation: scanline 2s linear infinite;
}

/* 基础渐变动画 */
@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.bg-gradient-animate {
  background-size: 200% 200%;
  animation: gradient-flow 8s ease infinite;
}

/* 新增高光效果 */
@keyframes shimmer {
  0% {
    opacity: 0.5;
    transform: translateX(-100%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 2s infinite;
}