qwer-xyz
81 lines
13 KiB
XML
81 lines
13 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" class="w-full h-full"><style>body { font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.5s, color 0.5s; }
|
|
/* 全局星座基础动画 */
|
|
.node-fire { animation: f-flicker 0.2s infinite alternate; }
|
|
.line-fire { stroke-dasharray: 10 10; animation: f-flow 1s linear infinite; }
|
|
.node-air { animation: a-pulse 1s infinite alternate; }
|
|
|
|
/* 水象专属强化 */
|
|
.wrap-water { animation: w-float 4s ease-in-out infinite alternate; }
|
|
.node-water { animation: w-glow 1.5s ease-in-out infinite alternate; }
|
|
.line-water { stroke-dasharray: 12 24; animation: w-flow 2s linear infinite; }
|
|
.node-water-ripple { animation: w-ripple 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
|
|
|
|
/* 土象专属强化 */
|
|
.node-earth { animation: e-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
|
|
.line-earth { stroke-dasharray: 20 40; animation: e-flow 2s linear infinite; }
|
|
.e-scan-line { animation: e-scan 3s linear infinite; }
|
|
.e-rot-box { transform-origin: 120px 120px; animation: e-rot 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
|
|
|
|
@keyframes f-flicker { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.2); } }
|
|
@keyframes f-flow { 100% { stroke-dashoffset: -20; } }
|
|
@keyframes a-pulse { 0% { opacity: 0.4; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.5); filter: brightness(1.5); } }
|
|
|
|
/* 新增水象/土象关键帧 */
|
|
@keyframes w-float { 0% { transform: translateY(-5px); } 100% { transform: translateY(5px); } }
|
|
@keyframes w-glow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); filter: brightness(1.3); } }
|
|
@keyframes w-ripple { 0% { r: 5px; opacity: 1; stroke-width: 4; } 100% { r: 35px; opacity: 0; stroke-width: 0; } }
|
|
@keyframes w-flow { 100% { stroke-dashoffset: -36; } }
|
|
|
|
@keyframes e-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
|
|
@keyframes e-flow { 100% { stroke-dashoffset: -60; } }
|
|
@keyframes e-scan { 0% { transform: translateY(-100px); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
|
|
@keyframes e-rot { 100% { transform: rotate(90deg); } }
|
|
{`.zr1{transform-origin:120px 120px;animation:zr1a 2s linear infinite}.zr2{animation:zr2a 1.5s infinite alternate}@keyframes zr1a{100%{transform:rotate(360deg)}}@keyframes zr2a{100%{transform:scale(1.05)}}`}
|
|
{`.zo1{animation:zo1a 1.5s steps(3) infinite alternate}.zo2{animation:zo2a 1s infinite alternate}@keyframes zo1a{0%{transform:translateY(10px) scaleY(0.9)}100%{transform:translateY(-10px) scaleY(1.1)}}@keyframes zo2a{0%{stroke-width:2;opacity:0.5}100%{stroke-width:12;opacity:1}}`}
|
|
{`.zt1{animation:zt1a 0.5s ease-out infinite alternate transform-origin:120px 120px}.zt2{stroke-dasharray:100;animation:zt2a 1s cubic-bezier(0.8, 0, 0.2, 1) infinite}@keyframes zt1a{0%{opacity:0.8;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}@keyframes zt2a{0%{stroke-dashoffset:100}100%{stroke-dashoffset:-100}}`}
|
|
{`.zrb1{animation:zrb1a 1.5s cubic-bezier(0.5,0,0.5,1) infinite alternate}.zrb2{animation:zrb2a 1.5s infinite alternate}@keyframes zrb1a{0%{transform:translateY(15px) scaleY(0.8)}100%{transform:translateY(-15px) scaleY(1.1)}}@keyframes zrb2a{0%{opacity:0;r:5px}100%{opacity:1;r:20px}}`}
|
|
{`.zd1{transform-origin:120px 120px;animation:zd1a 4s cubic-bezier(0.4,0,0.2,1) infinite}.zd2{transform-origin:120px 120px;animation:zd2a 6s linear infinite reverse}@keyframes zd1a{100%{transform:rotateX(180deg) rotate(360deg)}}@keyframes zd2a{100%{transform:rotate(360deg)}}`}
|
|
{`.zs1{stroke-dasharray:400;animation:zs1a 2s linear infinite}.zs2{transform-origin:120px 120px;animation:zs2a 4s linear infinite}@keyframes zs1a{100%{stroke-dashoffset:-400}}@keyframes zs2a{100%{transform:rotate(360deg)}}`}
|
|
{`.zh1{animation:zh1a 0.5s ease-in-out infinite alternate; transform-origin:120px 120px}.zh2{stroke-dasharray:150;animation:zh2a 0.8s linear infinite}@keyframes zh1a{0%{transform:scaleX(0.95) skewX(5deg)}100%{transform:scaleX(1.05) skewX(-5deg)}}@keyframes zh2a{100%{stroke-dashoffset:-300}}`}
|
|
{`.zg1{animation:zg1a 3s ease-in-out infinite alternate transform-origin:120px 120px}.zg2{animation:zg2a 1.5s infinite alternate}@keyframes zg1a{0%{transform:scale(0.9)}100%{transform:scale(1.1)}}@keyframes zg2a{0%{opacity:0.4;stroke-width:2}100%{opacity:1;stroke-width:8}}`}
|
|
{`.zm1{transform-origin:120px 120px;animation:zm1a 2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate}.zm2{transform-origin:120px 120px;animation:zm2a 10s linear infinite}@keyframes zm1a{0%{transform:rotate(-30deg)}100%{transform:rotate(30deg)}}@keyframes zm2a{100%{transform:rotate(360deg)}}`}
|
|
{`.zro1{animation:zro1a 0.8s ease-out infinite alternate transform-origin:120px 120px}.zro2{transform-origin:120px 120px;animation:zro2a 8s linear infinite}@keyframes zro1a{0%{transform:scale(0.85);filter:brightness(1)}100%{transform:scale(1.15);filter:brightness(1.5)}}@keyframes zro2a{100%{transform:rotate(360deg)}}`}
|
|
{`.zdg1{transform-origin:120px 120px;animation:zdg1a 1.5s steps(4) infinite}.zdg2{animation:zdg2a 2s linear infinite}@keyframes zdg1a{0%{transform:scale(1.2);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(0.8);opacity:0}}@keyframes zdg2a{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}`}
|
|
{`.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}`}</style><defs>
|
|
<filter id="glow-neon-d" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
|
|
<feMerge>
|
|
<feMergeNode in="blur"></feMergeNode>
|
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="glow-intense-d" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="8" result="b1"></feGaussianBlur>
|
|
<feGaussianBlur stdDeviation="3" result="b2"></feGaussianBlur>
|
|
<feMerge>
|
|
<feMergeNode in="b1"></feMergeNode>
|
|
<feMergeNode in="b2"></feMergeNode>
|
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="glow-neon-l" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.2" result="shadow"></feDropShadow>
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="glow"></feGaussianBlur>
|
|
<feMerge>
|
|
<feMergeNode in="shadow"></feMergeNode>
|
|
<feMergeNode in="glow"></feMergeNode>
|
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="glow-intense-l" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#000" flood-opacity="0.25" result="shadow"></feDropShadow>
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"></feGaussianBlur>
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="b2"></feGaussianBlur>
|
|
<feMerge>
|
|
<feMergeNode in="shadow"></feMergeNode>
|
|
<feMergeNode in="b1"></feMergeNode>
|
|
<feMergeNode in="b2"></feMergeNode>
|
|
<feMergeNode in="SourceGraphic"></feMergeNode>
|
|
</feMerge>
|
|
</filter><linearGradient id="bg-supreme-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#2a2d3e"></stop><stop offset="100%" stop-color="#0a0a0f"></stop></linearGradient><linearGradient id="bg-supreme-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-void-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1a0033"></stop><stop offset="50%" stop-color="#05000a"></stop><stop offset="100%" stop-color="#000000"></stop></linearGradient><linearGradient id="bg-void-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#312e81"></stop><stop offset="50%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-ice-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#002244"></stop><stop offset="100%" stop-color="#000a1a"></stop></linearGradient><linearGradient id="bg-ice-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e0f2fe"></stop><stop offset="100%" stop-color="#7dd3fc"></stop></linearGradient><linearGradient id="bg-gold-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a3b1c"></stop><stop offset="100%" stop-color="#1a140a"></stop></linearGradient><linearGradient id="bg-gold-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fef3c7"></stop><stop offset="100%" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="bg-moon-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#334155"></stop><stop offset="100%" stop-color="#0f172a"></stop></linearGradient><linearGradient id="bg-moon-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f8fafc"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-omega-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#4a0000"></stop><stop offset="100%" stop-color="#1a0000"></stop></linearGradient><linearGradient id="bg-omega-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-matrix-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#003311"></stop><stop offset="100%" stop-color="#001100"></stop></linearGradient><linearGradient id="bg-matrix-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-platinum-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#475569"></stop><stop offset="100%" stop-color="#1e293b"></stop></linearGradient><linearGradient id="bg-platinum-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-nebula-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#581c87"></stop><stop offset="50%" stop-color="#831843"></stop><stop offset="100%" stop-color="#171717"></stop></linearGradient><linearGradient id="bg-nebula-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="50%" stop-color="#fbcfe8"></stop><stop offset="100%" stop-color="#cbd5e1"></stop></linearGradient><linearGradient id="bg-aegis-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0f172a"></stop><stop offset="100%" stop-color="#020617"></stop></linearGradient><linearGradient id="bg-aegis-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f1f5f9"></stop><stop offset="100%" stop-color="#94a3b8"></stop></linearGradient><linearGradient id="bg-reactor-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#14532d"></stop><stop offset="100%" stop-color="#052e16"></stop></linearGradient><linearGradient id="bg-reactor-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#dcfce7"></stop><stop offset="100%" stop-color="#4ade80"></stop></linearGradient><linearGradient id="bg-tactical-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#450a0a"></stop><stop offset="100%" stop-color="#2a0000"></stop></linearGradient><linearGradient id="bg-tactical-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fee2e2"></stop><stop offset="100%" stop-color="#f87171"></stop></linearGradient><linearGradient id="bg-arcane-d" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3b0764"></stop><stop offset="100%" stop-color="#17002e"></stop></linearGradient><linearGradient id="bg-arcane-l" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f3e8ff"></stop><stop offset="100%" stop-color="#c084fc"></stop></linearGradient></defs><style>.zpg1{transform-origin:120px 120px;animation:zpg1a 2s ease-out infinite}.zpg2{animation:zpg2a 1s infinite alternate}@keyframes zpg1a{0%{r:40px;opacity:1;stroke-width:8}100%{r:110px;opacity:0;stroke-width:1}}@keyframes zpg2a{0%{transform:scale(0.95)}100%{transform:scale(1.05)}}</style><circle cx="120" cy="120" fill="none" stroke="#3b82f6" class="zpg1" filter="url(#glow-intense-d)"></circle><circle cx="120" cy="120" fill="none" stroke="#3b82f6" class="zpg1" style="animation-delay:1s" filter="url(#glow-intense-d)"></circle><g class="zpg2" transform-origin="120 120" filter="url(#glow-intense-d)"><circle cx="120" cy="120" r="70" fill="url(#bg-z-water-d)" stroke="#06b6d4" stroke-width="6"></circle><ellipse cx="120" cy="120" rx="40" ry="25" fill="none" stroke="#3b82f6" stroke-width="6"></ellipse><circle cx="100" cy="120" r="8" fill="#3b82f6"></circle><circle cx="140" cy="120" r="8" fill="#3b82f6"></circle></g></svg>
|