From 8ef173c7d836c382f9c33d299c5c8e52f6447530 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 08 四月 2025 11:19:57 +0800
Subject: [PATCH] 主页优化
---
src/app/globals.css | 314 +++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 261 insertions(+), 53 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
index fe46f64..8ce8f4c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -13,6 +13,11 @@
/* 鍩虹棰滆壊璁剧疆 */
--background: var(--ai-surface);
--foreground: #1E2B63;
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 10, 16, 51;
+ --background-end-rgb: 0, 0, 0;
+ --scrollbar-track: rgba(30, 43, 99, 0.1);
+ --scrollbar-thumb: rgba(106, 219, 255, 0.3);
}
@theme inline {
@@ -26,13 +31,71 @@
:root {
--background: var(--ai-dark);
--foreground: #E9EFFD;
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
}
}
body {
- background: var(--background);
- color: var(--foreground);
+ background: linear-gradient(to bottom,
+ rgb(var(--background-start-rgb)),
+ rgb(var(--background-end-rgb)));
+ color: rgb(var(--foreground-rgb));
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
+ min-height: 100vh;
+}
+
+/* 婊氬姩鎬ц兘浼樺寲 */
+* {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+html, body {
+ scroll-behavior: smooth;
+}
+
+/* 鍚敤纭欢鍔犻�� */
+.will-change-transform,
+.motion-safe\:will-change-transform,
+.motion-safe\:hover\:will-change-transform:hover,
+canvas {
+ will-change: transform, opacity;
+ transform: translateZ(0);
+ backface-visibility: hidden;
+}
+
+/* 浼樺寲婊氬姩鏉� */
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb);
+ border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(106, 219, 255, 0.5);
+}
+
+/* 婊氬姩浼樺寲绫� */
+.smooth-scroll {
+ overflow-y: scroll;
+ scroll-behavior: smooth;
+ -webkit-overflow-scrolling: touch;
+}
+
+/* 闃叉杩囧害閲嶆帓鍜岄噸缁� */
+.motion-reduce {
+ transition-duration: 0.01ms !important;
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
}
/* 瀵艰埅鏍忕壒鏁堟牱寮� */
@@ -53,6 +116,20 @@
.animate-fade-in {
animation: fade-in 1.5s ease-out forwards;
animation-delay: 0.5s;
+}
+
+/* 椤甸潰鍐呭娣″叆鍔ㄧ敾 */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.animate-fadeIn {
+ animation: fadeIn 0.6s ease-out;
}
/* Logo鍦嗙幆鑴夊啿鍔ㄧ敾 */
@@ -236,36 +313,29 @@
/* AI鏁版嵁娴佹晥鏋滃姩鐢� */
@keyframes dataflowY {
- 0% {
- background-position: 0 -200px;
+ from {
+ transform: translateY(-100%);
}
- 100% {
- background-position: 0 200px;
+ to {
+ transform: translateY(100%);
}
}
@keyframes dataflowX {
- 0% {
+ from {
transform: translateX(-100%);
- opacity: 0;
}
- 50% {
- opacity: 1;
- }
- 100% {
+ to {
transform: translateX(100%);
- opacity: 0;
}
}
.animate-dataflowY {
- background-image: linear-gradient(to bottom, transparent 0%, rgba(106, 219, 255, 0.4) 50%, transparent 100%);
- background-size: 100% 200px;
- animation: dataflowY 8s linear infinite;
+ animation: dataflowY 3s linear infinite;
}
.animate-dataflowX {
- animation: dataflowX 4s infinite;
+ animation: dataflowX 5s linear infinite;
}
/* 鎸夐挳鍊炬枩鍔ㄧ敾 */
@@ -296,7 +366,7 @@
}
.animate-scanline {
- animation: scanline 8s linear infinite;
+ animation: scanline 3s ease-in-out infinite;
}
/* 鍩虹娓愬彉鍔ㄧ敾 */
@@ -439,11 +509,11 @@
}
@keyframes dataflowY {
- 0% {
- background-position: 0 -200px;
+ from {
+ transform: translateY(-100%);
}
- 100% {
- background-position: 0 200px;
+ to {
+ transform: translateY(100%);
}
}
@@ -483,7 +553,7 @@
}
.animate-data-blink {
- animation: data-blink 3s ease-in-out infinite;
+ animation: data-blink 2s ease-in-out infinite;
}
.animate-data-blink-slow {
@@ -491,27 +561,16 @@
}
.animate-dataflowY {
- background-image: linear-gradient(to bottom, transparent 0%, rgba(106, 219, 255, 0.4) 50%, transparent 100%);
- background-size: 100% 200px;
- animation: dataflowY 8s linear infinite;
+ animation: dataflowY 3s linear infinite;
}
.animate-scanline {
- animation: scanline 8s linear infinite;
+ animation: scanline 3s ease-in-out infinite;
}
.animate-fade-in {
- animation: fadeIn 1.5s ease-in-out forwards;
+ animation: fade-in 1.5s ease-out forwards;
animation-delay: 0.5s;
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
}
/* 鎮仠鏁堟灉澧炲己 */
@@ -535,66 +594,215 @@
animation: circle-pulse 4s ease-in-out infinite;
}
-/* 绾㈡涓鎶�鎰熷渾鍦堝姩鐢绘晥鏋� - 鏇存煍鍜岀殑鐗堟湰 */
+/* 鍏夋壂鎻忔晥鏋滃姩鐢� */
+@keyframes lightSweep {
+ 0% {
+ transform: translateX(-100%) skewX(-45deg);
+ opacity: 0;
+ }
+ 20% {
+ opacity: 0.3;
+ }
+ 60% {
+ opacity: 0.3;
+ }
+ 100% {
+ transform: translateX(100%) skewX(-45deg);
+ opacity: 0;
+ }
+}
+
+/* 鎶�鏈渾鍦堟晥鏋滃姩鐢� */
@keyframes tech-circle-pulse {
- 0%, 100% {
+ 0% {
opacity: 0.3;
border-color: rgba(106, 219, 255, 0.2);
}
50% {
opacity: 0.6;
- border-color: rgba(106, 219, 255, 0.5);
+ border-color: rgba(106, 219, 255, 0.3);
+ }
+ 100% {
+ opacity: 0.3;
+ border-color: rgba(106, 219, 255, 0.2);
}
}
@keyframes tech-circle-rotate {
0% {
transform: rotate(0deg);
- background-color: rgba(19, 28, 65, 0.3);
+ background: rgba(19, 28, 65, 0.3);
}
50% {
- background-color: rgba(19, 28, 65, 0.5);
+ background: rgba(30, 43, 99, 0.3);
}
100% {
transform: rotate(360deg);
- background-color: rgba(19, 28, 65, 0.3);
+ background: rgba(19, 28, 65, 0.3);
}
}
@keyframes tech-center-blink {
- 0%, 100% {
- opacity: 0.1;
+ 0% {
+ opacity: 0.2;
transform: scale(0.8);
}
50% {
opacity: 0.5;
- transform: scale(1.1);
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0.2;
+ transform: scale(0.8);
}
}
@keyframes tech-glow-pulse {
- 0%, 100% {
+ 0% {
opacity: 0.05;
- box-shadow: 0 0 3px rgba(106, 219, 255, 0.05);
+ box-shadow: 0 0 5px 0px rgba(106, 219, 255, 0.05);
}
50% {
opacity: 0.15;
- box-shadow: 0 0 8px rgba(106, 219, 255, 0.15);
+ box-shadow: 0 0 15px 5px rgba(106, 219, 255, 0.15);
+ }
+ 100% {
+ opacity: 0.05;
+ box-shadow: 0 0 5px 0px rgba(106, 219, 255, 0.05);
}
}
.animate-tech-circle-pulse {
- animation: tech-circle-pulse 8s ease-in-out infinite;
+ animation: tech-circle-pulse 8s infinite ease-in-out;
}
.animate-tech-circle-rotate {
- animation: tech-circle-rotate 30s linear infinite;
+ animation: tech-circle-rotate 30s infinite linear;
}
.animate-tech-center-blink {
- animation: tech-center-blink 5s ease-in-out infinite;
+ animation: tech-center-blink 5s infinite ease-in-out;
}
.animate-tech-glow-pulse {
- animation: tech-glow-pulse 8s ease-in-out infinite;
+ animation: tech-glow-pulse 8s infinite ease-in-out;
+}
+
+/* 楂樹寒鍒掕繃鏁堟灉 - 鐢ㄤ簬鐧诲綍椤甸潰鎸夐挳 */
+@keyframes shimmer {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+.animate-shimmer {
+ animation: shimmer 2s infinite;
+}
+
+/* 鐧诲綍椤甸潰鐗规畩鍔ㄧ敾 */
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+.animate-float {
+ animation: float 6s ease-in-out infinite;
+}
+
+@keyframes tech-connect {
+ 0%, 100% {
+ opacity: 0.2;
+ transform: scaleX(0.7);
+ }
+ 50% {
+ opacity: 0.8;
+ transform: scaleX(1);
+ }
+}
+
+.animate-tech-connect {
+ animation: tech-connect 8s ease-in-out infinite;
+}
+
+/* 杈撳叆妗嗚仛鐒﹀姩鐢� */
+@keyframes focus-border {
+ 0% {
+ transform: scaleX(0);
+ }
+ 100% {
+ transform: scaleX(1);
+ }
+}
+
+.animate-focus-border {
+ animation: focus-border 0.3s ease-out forwards;
+}
+
+/* 閲忓瓙鍏夌嚎鏁堟灉鍔ㄧ敾 - 鐧诲綍鎸夐挳涓撶敤 */
+@keyframes quantum-scan {
+ 0% {
+ transform: translateX(-100%) skewX(-30deg);
+ opacity: 0;
+ }
+ 20% {
+ opacity: 0.5;
+ }
+ 50% {
+ opacity: 0.7;
+ }
+ 80% {
+ opacity: 0.5;
+ }
+ 100% {
+ transform: translateX(100%) skewX(-30deg);
+ opacity: 0;
+ }
+}
+
+@keyframes quantum-glow {
+ 0%, 100% {
+ box-shadow: 0 0 5px 2px rgba(106, 219, 255, 0.1);
+ }
+ 50% {
+ box-shadow: 0 0 15px 5px rgba(106, 219, 255, 0.3);
+ }
+}
+
+@keyframes quantum-pulse {
+ 0%, 100% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.02);
+ }
+}
+
+.quantum-button:hover .quantum-scan-line {
+ animation: quantum-scan 3s ease-in-out infinite;
+}
+
+.quantum-button:hover {
+ animation: quantum-glow 4s ease-in-out infinite;
+}
+
+.quantum-button:hover .quantum-pulse {
+ animation: quantum-pulse 2s ease-in-out infinite;
+}
+
+/* 涓婚〉闂厜鎸夐挳鏁堟灉 */
+@keyframes shine {
+ 100% {
+ left: 125%;
+ }
+}
+
+.animate-shine {
+ animation: shine 1.5s ease-in-out;
}
--
Gitblit v1.9.3