-
-
-
-
-
-
+
+
+
+
@@ -772,8 +792,9 @@ onMounted(() => {
opacity: 1;
}
- .cube {
- animation: cubeRotate 3s linear infinite;
+ .click-hint {
+ opacity: 0;
+ transform: translate(-50%, -50%) scale(0.8);
}
.scan-line {
@@ -789,6 +810,43 @@ onMounted(() => {
}
}
+ // 点击引导
+ .click-hint {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ z-index: 10;
+ pointer-events: none;
+ opacity: 1;
+ transition: all 0.3s;
+ animation: clickHintFloat 2s ease-in-out infinite;
+
+ .hand-icon {
+ width: 32px;
+ height: 32px;
+ color: rgba(255, 255, 255, 0.9);
+ filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+ animation: handClick 1.5s ease-in-out infinite;
+ }
+
+ .hint-text {
+ font-size: 12px;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.9);
+ background: rgba(103, 194, 58, 0.3);
+ padding: 4px 12px;
+ border-radius: 12px;
+ border: 1px solid rgba(103, 194, 58, 0.5);
+ white-space: nowrap;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+ }
+ }
+
// 动态网格背景
.grid-background {
position: absolute;
@@ -921,53 +979,97 @@ onMounted(() => {
}
}
- // 3D立方体容器
- .cube-container {
+ // AI神经网络
+ .ai-network {
position: relative;
- width: 40px;
- height: 40px;
- perspective: 200px;
+ width: 60px;
+ height: 60px;
z-index: 2;
- }
+ animation: networkRotate 8s linear infinite;
- // 3D立方体
- .cube {
- width: 100%;
- height: 100%;
- position: relative;
- transform-style: preserve-3d;
- transform: rotateX(-20deg) rotateY(-20deg);
-
- .cube-face {
+ // 中心节点
+ .center-node {
position: absolute;
- width: 40px;
- height: 40px;
- background: rgba(103, 194, 58, 0.2);
- border: 1px solid rgba(103, 194, 58, 0.6);
- backdrop-filter: blur(5px);
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 16px;
+ height: 16px;
- &.front {
- transform: translateZ(20px);
+ .node-core {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, #67c23a, #409eff);
+ border-radius: 50%;
+ box-shadow:
+ 0 0 15px rgba(103, 194, 58, 0.8),
+ 0 0 30px rgba(64, 158, 255, 0.4),
+ inset 0 0 8px rgba(255, 255, 255, 0.3);
+ animation: centerNodePulse 2s ease-in-out infinite;
}
+ }
- &.back {
- transform: translateZ(-20px) rotateY(180deg);
+ // 外围节点
+ .outer-nodes {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 100%;
+ transform: translate(-50%, -50%);
+
+ .outer-node {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform-origin: center;
+
+ .node-dot {
+ width: 8px;
+ height: 8px;
+ background: rgba(103, 194, 58, 0.8);
+ border: 1px solid rgba(103, 194, 58, 1);
+ border-radius: 50%;
+ box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
+ animation: outerNodeBlink 2s ease-in-out infinite;
+ animation-delay: inherit;
+ }
+
+ .connection-line {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 1px;
+ height: 25px;
+ background: linear-gradient(to top,
+ rgba(103, 194, 58, 0.6),
+ transparent);
+ transform: translateX(-50%);
+ animation: connectionPulse 2s ease-in-out infinite;
+ animation-delay: inherit;
+ }
}
+ }
- &.left {
- transform: translateX(-20px) rotateY(-90deg);
- }
+ // 数据流动粒子
+ .data-particles {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 100%;
+ transform: translate(-50%, -50%);
- &.right {
- transform: translateX(20px) rotateY(90deg);
- }
-
- &.top {
- transform: translateY(-20px) rotateX(90deg);
- }
-
- &.bottom {
- transform: translateY(20px) rotateX(-90deg);
+ .data-particle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 3px;
+ height: 3px;
+ background: #409eff;
+ border-radius: 50%;
+ box-shadow: 0 0 6px rgba(64, 158, 255, 0.8);
+ animation: dataParticleMove 2s ease-in-out infinite;
}
}
}
@@ -1846,6 +1948,26 @@ onMounted(() => {
}
}
+// 点击引导浮动
+@keyframes clickHintFloat {
+ 0%, 100% {
+ transform: translate(-50%, -50%);
+ }
+ 50% {
+ transform: translate(-50%, -55%);
+ }
+}
+
+// 手势点击动画
+@keyframes handClick {
+ 0%, 100% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(0.9);
+ }
+}
+
// 脉冲圆环
@keyframes pulseRing {
0% {
@@ -1868,6 +1990,34 @@ onMounted(() => {
}
}
+// AI神经网络旋转
+@keyframes networkRotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+// 中心节点脉冲
+@keyframes centerNodePulse {
+ 0%, 100% {
+ transform: scale(1);
+ box-shadow:
+ 0 0 15px rgba(103, 194, 58, 0.8),
+ 0 0 30px rgba(64, 158, 255, 0.4),
+ inset 0 0 8px rgba(255, 255, 255, 0.3);
+ }
+ 50% {
+ transform: scale(1.2);
+ box-shadow:
+ 0 0 25px rgba(103, 194, 58, 1),
+ 0 0 50px rgba(64, 158, 255, 0.6),
+ inset 0 0 12px rgba(255, 255, 255, 0.5);
+ }
+}
+
// 状态点脉冲
@keyframes statusDotPulse {
0%, 100% {
@@ -1901,4 +2051,46 @@ onMounted(() => {
transform: scaleY(1.3);
}
}
+
+// 外围节点闪烁
+@keyframes outerNodeBlink {
+ 0%, 100% {
+ opacity: 0.6;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1.3);
+ }
+}
+
+// 连接线脉冲
+@keyframes connectionPulse {
+ 0%, 100% {
+ opacity: 0.4;
+ }
+ 50% {
+ opacity: 1;
+ }
+}
+
+// 数据粒子移动
+@keyframes dataParticleMove {
+ 0% {
+ transform: translate(-50%, -50%) translateY(0) scale(0);
+ opacity: 0;
+ }
+ 20% {
+ opacity: 1;
+ transform: translate(-50%, -50%) translateY(-5px) scale(1);
+ }
+ 80% {
+ opacity: 1;
+ transform: translate(-50%, -50%) translateY(-20px) scale(1);
+ }
+ 100% {
+ transform: translate(-50%, -50%) translateY(-25px) scale(0);
+ opacity: 0;
+ }
+}