@import "tailwindcss";
|
|
:root {
|
/* 现代科技感主题配色 */
|
--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 {
|
--color-background: var(--background);
|
--color-foreground: var(--foreground);
|
--font-sans: var(--font-geist-sans);
|
--font-mono: var(--font-geist-mono);
|
}
|
|
@media (prefers-color-scheme: dark) {
|
:root {
|
--background: var(--ai-dark);
|
--foreground: #E9EFFD;
|
}
|
}
|
|
body {
|
background: var(--background);
|
color: var(--foreground);
|
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;
|
}
|
