{"html":"

\n","css":".warp-loader {\n position: relative;\n width: 160px;\n height: 160px;\n}\n\n.ring {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(\n circle,\n rgba(0, 255, 255, 0.15) 30%,\n transparent 70%\n );\n animation: pulse 2.2s ease-out infinite;\n opacity: 0;\n box-shadow:\n 0 0 12px #00d1ff66,\n 0 0 24px #00d1ff33;\n border: 2px solid rgba(0, 255, 255, 0.2);\n}\n\n.ring:nth-child(1) {\n animation-delay: 0s;\n}\n.ring:nth-child(2) {\n animation-delay: 0.4s;\n}\n.ring:nth-child(3) {\n animation-delay: 0.8s;\n}\n.ring:nth-child(4) {\n animation-delay: 1.2s;\n}\n\n@keyframes pulse {\n 0% {\n transform: translate(-50%, -50%) scale(0.3);\n opacity: 1;\n }\n 70% {\n transform: translate(-50%, -50%) scale(1.1);\n opacity: 0.15;\n }\n 100% {\n transform: translate(-50%, -50%) scale(1.4);\n opacity: 0;\n }\n}\n\n.core-glow {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 24px; /* Reduced size for the core glow */\n height: 24px;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n background: radial-gradient(circle at center, #00e5ff, #0099cc);\n box-shadow:\n 0 0 25px #00e5ff,\n 0 0 60px #00e5ff88,\n 0 0 100px #00e5ff33;\n animation: corePulse 1.6s ease-in-out infinite;\n}\n\n@keyframes corePulse {\n 0%,\n 100% {\n transform: translate(-50%, -50%) scale(1);\n }\n 50% {\n transform: translate(-50%, -50%) scale(1.2);\n }\n}\n"}

old-lizard-88

👁 实时预览

📝 源代码