{"html":"

\n","css":".loader-container {\n width: 300px;\n height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n background: #000000;\n border: 5px solid rgb(255, 255, 255);\n border-radius: 50%;\n overflow: hidden;\n filter: contrast(30);\n}\n\n.liquid-metal-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n filter: blur(15px);\n animation: rotate-bg 25s linear infinite;\n}\n\n.liquid-metal-wrapper::before {\n content: \"\";\n position: absolute;\n width: 200%;\n height: 200%;\n top: -50%;\n left: -50%;\n background: radial-gradient(circle, #8e2de2, transparent 50%);\n animation: rotate-bg 30s linear infinite reverse;\n}\n\n.main-orb {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 120px;\n height: 120px;\n margin-top: -60px;\n margin-left: -60px;\n background: radial-gradient(circle at 30% 30%, #f0f0f0, #a0a0a0);\n border-radius: 50%;\n animation: pulse 4s ease-in-out infinite;\n}\n\n.satellite-orb {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 60px;\n height: 60px;\n margin-top: -30px;\n margin-left: -30px;\n border-radius: 50%;\n animation-iteration-count: infinite;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.loader-text {\n font-family: \"Exo 2\", sans-serif;\n font-size: 2em;\n color: #1a1a1a;\n z-index: 10;\n letter-spacing: 2px;\n opacity: 0;\n animation: reveal-text 4s ease-in-out infinite;\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.15);\n }\n}\n\n@keyframes rotate-bg {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes flow-1 {\n 0%,\n 100% {\n transform: rotate(0deg) translateX(150px) scale(0.5);\n }\n 50% {\n transform: rotate(180deg) translateX(0) scale(1);\n }\n}\n\n@keyframes flow-2 {\n 0%,\n 100% {\n transform: rotate(0deg) translateY(150px) scale(0.6);\n }\n 50% {\n transform: rotate(180deg) translateY(0) scale(1);\n }\n}\n\n@keyframes flow-3 {\n 0%,\n 100% {\n transform: rotate(0deg) translateX(-150px) scale(0.7);\n }\n 50% {\n transform: rotate(180deg) translateX(0) scale(1);\n }\n}\n\n@keyframes reveal-text {\n 0%,\n 40%,\n 90%,\n 100% {\n opacity: 0;\n }\n 50%,\n 70% {\n opacity: 1;\n }\n}\n\n.satellite-orb:nth-child(1) {\n animation-name: flow-1;\n animation-duration: 4s;\n background: #00c6ff;\n}\n.satellite-orb:nth-child(2) {\n animation-name: flow-2;\n animation-duration: 4s;\n animation-delay: -1s;\n background: #f80759;\n}\n.satellite-orb:nth-child(3) {\n animation-name: flow-3;\n animation-duration: 4s;\n animation-delay: -2s;\n background: #00ff00;\n}\n.satellite-orb:nth-child(4) {\n animation-name: flow-1;\n animation-duration: 4s;\n animation-delay: -3s;\n background: #ffff00;\n}\n"}

funny-dog-38

👁 实时预览

📝 源代码