From 92405300f139ed1a7632b6601505e8dcdbc3a6e9 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期六, 05 四月 2025 16:01:16 +0800
Subject: [PATCH] 导航栏优化
---
src/app/globals.css | 465 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 441 insertions(+), 24 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
index 9144a3f..fe46f64 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -40,46 +40,207 @@
box-shadow: 0 0 15px rgba(106, 219, 255, 0.5);
}
+/* 骞虫粦娓愬叆鍔ㄧ敾 */
+@keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.animate-fade-in {
+ animation: fade-in 1.5s ease-out forwards;
+ animation-delay: 0.5s;
+}
+
/* Logo鍦嗙幆鑴夊啿鍔ㄧ敾 */
@keyframes logo-ring-pulse {
0% {
- opacity: 0.15;
- box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15);
+ opacity: 0.4;
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
}
- 25% {
- opacity: 0.35;
- box-shadow: 0 0 0 1px rgba(136, 219, 255, 0.2);
+ 20% {
+ opacity: 0.7;
+ box-shadow: 0 0 10px rgba(106, 219, 255, 0.3);
}
- 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);
+ 40% {
+ opacity: 0.4;
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
}
100% {
- opacity: 0.15;
- box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15);
+ opacity: 0.4;
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
}
}
.animate-logo-pulse {
- animation: logo-ring-pulse 6s ease-in-out infinite;
+ animation: logo-ring-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* 瀵艰埅鏍忕矑瀛愬姩鐢� */
+@keyframes particle-float {
+ 0% {
+ transform: translateY(0) translateX(0);
+ opacity: 0;
+ }
+ 20% {
+ opacity: 0.4;
+ }
+ 80% {
+ opacity: 0.4;
+ }
+ 100% {
+ transform: translateY(-30px) translateX(20px);
+ opacity: 0;
+ }
+}
+
+.animate-particle {
+ animation: particle-float 8s ease-in-out infinite;
+}
+
+.animate-particle-delay-1 {
+ animation: particle-float 8s ease-in-out 1s infinite;
+}
+
+.animate-particle-delay-2 {
+ animation: particle-float 10s ease-in-out 2s infinite;
+}
+
+.animate-particle-delay-3 {
+ animation: particle-float 7s ease-in-out 3s infinite;
+}
+
+.animate-particle-delay-4 {
+ animation: particle-float 9s ease-in-out 4s infinite;
+}
+
+/* AI绁炵粡缃戠粶杩炴帴鍔ㄧ敾 */
+@keyframes neural-pulse {
+ 0% {
+ opacity: 0.2;
+ }
+ 50% {
+ opacity: 0.8;
+ }
+ 100% {
+ opacity: 0.2;
+ }
+}
+
+.animate-neural-pulse {
+ animation: neural-pulse 3s ease-in-out infinite;
+}
+
+.animate-neural-pulse-delay-1 {
+ animation: neural-pulse 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1s infinite;
+}
+
+.animate-neural-pulse-delay-2 {
+ animation: neural-pulse-delay-2 3s ease-in-out infinite;
+ animation-delay: 1.5s;
+}
+
+/* AI鏁版嵁澶勭悊鍏夌嚎鏁堟灉 */
+@keyframes data-scan {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+.animate-data-scan {
+ animation: data-scan 12s linear infinite;
+}
+
+.animate-data-scan-delay {
+ animation: data-scan 8s cubic-bezier(0.25, 0.1, 0.25, 1) 4s infinite;
+}
+
+/* AI杩愮畻鑺傜偣闂儊 */
+@keyframes compute-node {
+ 0% {
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
+ }
+ 50% {
+ box-shadow: 0 0 15px rgba(106, 219, 255, 0.4);
+ }
+ 100% {
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
+ }
+}
+
+.animate-compute-node {
+ animation: compute-node 4s ease-in-out infinite;
+}
+
+.animate-compute-node-delay-1 {
+ animation: compute-node 3s ease-in-out 1s infinite;
+}
+
+.animate-compute-node-delay-2 {
+ animation: compute-node 3s ease-in-out 2s infinite;
+}
+
+/* 閲忓瓙璁＄畻娉㈠姩鏁堟灉 */
+@keyframes quantum-wave {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50px);
+ }
+}
+
+.animate-quantum-wave {
+ animation: quantum-wave 10s linear infinite;
+}
+
+/* 鍔ㄦ�佺綉鏍肩嚎鍔ㄧ敾 */
+@keyframes grid-pulse {
+ 0%, 100% {
+ opacity: 0.05;
+ transform: scaleY(1);
+ }
+ 50% {
+ opacity: 0.15;
+ transform: scaleY(1.05);
+ }
+}
+
+.animate-grid-pulse {
+ animation: grid-pulse 4s ease-in-out infinite;
+}
+
+/* 鏁版嵁闂儊鍔ㄧ敾 */
+@keyframes data-blink {
+ 0%, 100% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0.9;
+ }
+}
+
+.animate-data-blink {
+ animation: data-blink 3s ease-in-out infinite;
+}
+
+.animate-data-blink-slow {
+ animation: data-blink-slow 5s ease-in-out infinite;
}
/* AI鏁版嵁娴佹晥鏋滃姩鐢� */
@keyframes dataflowY {
0% {
- transform: translateY(-100%);
- opacity: 0;
- }
- 50% {
- opacity: 1;
+ background-position: 0 -200px;
}
100% {
- transform: translateY(100%);
- opacity: 0;
+ background-position: 0 200px;
}
}
@@ -98,7 +259,9 @@
}
.animate-dataflowY {
- animation: dataflowY 3s infinite;
+ 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;
}
.animate-dataflowX {
@@ -133,7 +296,7 @@
}
.animate-scanline {
- animation: scanline 2s linear infinite;
+ animation: scanline 8s linear infinite;
}
/* 鍩虹娓愬彉鍔ㄧ敾 */
@@ -181,3 +344,257 @@
);
animation: shimmer 2s infinite;
}
+
+/* 瀵艰埅鏍忓姩鎬佹晥鏋滃姩鐢� */
+@keyframes logo-ring-pulse {
+ 0% {
+ opacity: 0.4;
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
+ }
+ 20% {
+ opacity: 0.7;
+ box-shadow: 0 0 10px rgba(106, 219, 255, 0.3);
+ }
+ 40% {
+ opacity: 0.4;
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
+ }
+ 100% {
+ opacity: 0.4;
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
+ }
+}
+
+@keyframes neural-pulse {
+ 0% {
+ opacity: 0.2;
+ }
+ 50% {
+ opacity: 0.8;
+ }
+ 100% {
+ opacity: 0.2;
+ }
+}
+
+@keyframes neural-pulse-delay-2 {
+ 0% {
+ opacity: 0.2;
+ }
+ 50% {
+ opacity: 0.8;
+ }
+ 100% {
+ opacity: 0.2;
+ }
+}
+
+@keyframes compute-node {
+ 0% {
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
+ }
+ 50% {
+ box-shadow: 0 0 15px rgba(106, 219, 255, 0.4);
+ }
+ 100% {
+ box-shadow: 0 0 0 rgba(106, 219, 255, 0);
+ }
+}
+
+@keyframes quantum-wave {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes data-scan {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+/* 鏂板绉戞妧鎰熷姩鐢绘晥鏋� */
+@keyframes data-blink {
+ 0%, 100% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0.9;
+ }
+}
+
+@keyframes data-blink-slow {
+ 0%, 100% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0.7;
+ }
+}
+
+@keyframes dataflowY {
+ 0% {
+ background-position: 0 -200px;
+ }
+ 100% {
+ background-position: 0 200px;
+ }
+}
+
+@keyframes scanline {
+ 0% {
+ transform: translateY(-100%);
+ }
+ 100% {
+ transform: translateY(100%);
+ }
+}
+
+/* 鍔ㄧ敾绫诲簲鐢� */
+.animate-logo-pulse {
+ animation: logo-ring-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-neural-pulse {
+ animation: neural-pulse 3s ease-in-out infinite;
+}
+
+.animate-neural-pulse-delay-2 {
+ animation: neural-pulse-delay-2 3s ease-in-out infinite;
+ animation-delay: 1.5s;
+}
+
+.animate-compute-node {
+ animation: compute-node 4s ease-in-out infinite;
+}
+
+.animate-quantum-wave {
+ animation: quantum-wave 10s linear infinite;
+}
+
+.animate-data-scan {
+ animation: data-scan 12s linear infinite;
+}
+
+.animate-data-blink {
+ animation: data-blink 3s ease-in-out infinite;
+}
+
+.animate-data-blink-slow {
+ animation: data-blink-slow 5s ease-in-out infinite;
+}
+
+.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;
+}
+
+.animate-scanline {
+ animation: scanline 8s linear infinite;
+}
+
+.animate-fade-in {
+ animation: fadeIn 1.5s ease-in-out forwards;
+ animation-delay: 0.5s;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+/* 鎮仠鏁堟灉澧炲己 */
+.navbar-hover-glow:hover {
+ box-shadow: 0 5px 20px rgba(106, 219, 255, 0.3);
+}
+
+/* 鏍囩孩妗嗗渾鍦堢殑鍗曚竴绠�鍖栧姩鐢绘晥鏋� */
+@keyframes circle-pulse {
+ 0%, 100% {
+ opacity: 0.2;
+ border-color: rgba(106, 219, 255, 0.4);
+ }
+ 50% {
+ opacity: 0.8;
+ border-color: rgba(106, 219, 255, 0.8);
+ }
+}
+
+.animate-circle-pulse {
+ animation: circle-pulse 4s ease-in-out infinite;
+}
+
+/* 绾㈡涓鎶�鎰熷渾鍦堝姩鐢绘晥鏋� - 鏇存煍鍜岀殑鐗堟湰 */
+@keyframes tech-circle-pulse {
+ 0%, 100% {
+ opacity: 0.3;
+ border-color: rgba(106, 219, 255, 0.2);
+ }
+ 50% {
+ opacity: 0.6;
+ border-color: rgba(106, 219, 255, 0.5);
+ }
+}
+
+@keyframes tech-circle-rotate {
+ 0% {
+ transform: rotate(0deg);
+ background-color: rgba(19, 28, 65, 0.3);
+ }
+ 50% {
+ background-color: rgba(19, 28, 65, 0.5);
+ }
+ 100% {
+ transform: rotate(360deg);
+ background-color: rgba(19, 28, 65, 0.3);
+ }
+}
+
+@keyframes tech-center-blink {
+ 0%, 100% {
+ opacity: 0.1;
+ transform: scale(0.8);
+ }
+ 50% {
+ opacity: 0.5;
+ transform: scale(1.1);
+ }
+}
+
+@keyframes tech-glow-pulse {
+ 0%, 100% {
+ opacity: 0.05;
+ box-shadow: 0 0 3px rgba(106, 219, 255, 0.05);
+ }
+ 50% {
+ opacity: 0.15;
+ box-shadow: 0 0 8px rgba(106, 219, 255, 0.15);
+ }
+}
+
+.animate-tech-circle-pulse {
+ animation: tech-circle-pulse 8s ease-in-out infinite;
+}
+
+.animate-tech-circle-rotate {
+ animation: tech-circle-rotate 30s linear infinite;
+}
+
+.animate-tech-center-blink {
+ animation: tech-center-blink 5s ease-in-out infinite;
+}
+
+.animate-tech-glow-pulse {
+ animation: tech-glow-pulse 8s ease-in-out infinite;
+}
--
Gitblit v1.9.3