mirror of
https://github.com/stardrophere/InsightRadar.git
synced 2026-06-06 01:57:51 +08:00
stardrophere
69 lines
1.9 KiB
XML
69 lines
1.9 KiB
XML
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
|
<style>
|
|
/* 核心呼吸灯动画 */
|
|
.ai-core-glow {
|
|
transform-origin: center;
|
|
animation: core-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* 雷达圈旋转动画 */
|
|
.radar-ring {
|
|
transform-origin: center;
|
|
}
|
|
|
|
.radar-ring.outer {
|
|
animation: spin-reverse 20s linear infinite;
|
|
}
|
|
|
|
.radar-ring.inner {
|
|
animation: spin 12s linear infinite;
|
|
}
|
|
|
|
/* 数据连线光流效果 */
|
|
.data-link {
|
|
stroke-dasharray: 4;
|
|
animation: flow 3s linear infinite;
|
|
}
|
|
|
|
@keyframes core-pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
transform: scale(2.2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin-reverse {
|
|
from { transform: rotate(360deg); }
|
|
to { transform: rotate(0deg); }
|
|
}
|
|
|
|
@keyframes flow {
|
|
from { stroke-dashoffset: 8; }
|
|
to { stroke-dashoffset: 0; }
|
|
}
|
|
</style>
|
|
|
|
<circle class="radar-ring outer" cx="16" cy="16" r="14" stroke="#3b82f6" stroke-width="1" stroke-dasharray="4 8" opacity="0.4" />
|
|
|
|
<circle class="radar-ring inner" cx="16" cy="16" r="9" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="12 4" opacity="0.6" />
|
|
|
|
<path class="data-link" d="M16 16 L25 7 M16 16 L7 22 L5 20 M16 16 L23 25" stroke="#3b82f6" stroke-width="1" opacity="0.3" />
|
|
|
|
<circle class="data-node" cx="25" cy="7" r="1.5" fill="#3b82f6" opacity="0.7" />
|
|
<circle class="data-node" cx="7" cy="22" r="1.5" fill="#3b82f6" opacity="0.7" />
|
|
<circle class="data-node" cx="23" cy="25" r="1" fill="#3b82f6" opacity="0.5" />
|
|
|
|
<circle class="ai-core" cx="16" cy="16" r="3.5" fill="#3b82f6" />
|
|
|
|
<circle class="ai-core-glow" cx="16" cy="16" r="3.5" fill="#3b82f6" opacity="0.4" />
|
|
</svg> |