{"html":"

\n","css":".quantum-loader {\n width: 200px;\n height: 200px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.quantum-core {\n width: 60px;\n height: 60px;\n position: relative;\n transform-style: preserve-3d;\n}\n\n.quantum-sphere {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at 30% 30%,\n #ffffff,\n #4a6cf7 30%,\n #1a1a3a 70%\n );\n border-radius: 50%;\n animation: pulseSphere 2s ease-in-out infinite;\n}\n\n.particle-ring {\n position: absolute;\n width: 120px;\n height: 120px;\n top: -30px;\n left: -30px;\n border: 2px solid transparent;\n border-radius: 50%;\n animation: rotateRing 3s linear infinite;\n}\n\n.particle-ring::before,\n.particle-ring::after {\n content: \"\";\n position: absolute;\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background: #4a6cf7;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.particle-ring::before {\n left: -7px;\n box-shadow: 0 0 20px #4a6cf7;\n}\n\n.particle-ring::after {\n right: -7px;\n box-shadow: 0 0 20px #4a6cf7;\n}\n\n.energy-field {\n position: absolute;\n width: 180px;\n height: 180px;\n top: -60px;\n left: -60px;\n border-radius: 50%;\n background: conic-gradient(\n from 0deg,\n transparent,\n #4a6cf7 120deg,\n transparent 180deg,\n #4a6cf7 300deg,\n transparent 360deg\n );\n animation: rotateField 4s linear infinite;\n opacity: 0.3;\n}\n\n.quantum-waves {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.wave {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 2px solid #4a6cf7;\n border-radius: 50%;\n animation: expandWave 3s ease-out infinite;\n opacity: 0;\n}\n\n.wave:nth-child(2) {\n animation-delay: 1s;\n}\n\n.wave:nth-child(3) {\n animation-delay: 2s;\n}\n\n@keyframes pulseSphere {\n 0%,\n 100% {\n transform: scale(1);\n filter: brightness(1);\n }\n 50% {\n transform: scale(1.1);\n filter: brightness(1.2);\n }\n}\n\n@keyframes rotateRing {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes rotateField {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(-360deg);\n }\n}\n\n@keyframes expandWave {\n 0% {\n width: 60px;\n height: 60px;\n top: 70px;\n left: 70px;\n opacity: 0.8;\n }\n 100% {\n width: 200px;\n height: 200px;\n top: 0;\n left: 0;\n opacity: 0;\n }\n}\n\n.quantum-sphere::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: inherit;\n border-radius: 50%;\n filter: blur(10px);\n opacity: 0.4;\n z-index: -1;\n}\n\n.quantum-core::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle at center,\n rgba(74, 108, 247, 0.5) 0%,\n transparent 70%\n );\n animation: pulseCore 2s ease-in-out infinite;\n}\n\n@keyframes pulseCore {\n 0%,\n 100% {\n transform: scale(1);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1.5);\n opacity: 0.2;\n }\n}\n"}

tidy-fox-67

👁 实时预览

📝 源代码