{"html":"

\n","css":".cyber-loader-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n /* Ambient environmental glow */\n filter: drop-shadow(0 0 35px rgba(0, 255, 204, 0.15));\n}\n\n.plasma-vial {\n --neon-cyan: #00ffcc;\n --neon-blue: #0066ff;\n position: relative;\n width: 80px;\n height: 200px;\n border-radius: 40px;\n background: linear-gradient(180deg, #050b14 0%, #020408 100%);\n border: 2px solid rgba(0, 255, 204, 0.15);\n box-shadow:\n 0 0 20px 0 rgba(0, 255, 204, 0.1),\n inset 0 0 25px rgba(0, 102, 255, 0.4),\n inset 0 -15px 30px rgba(0, 255, 204, 0.2);\n overflow: hidden;\n animation: vial-pulse 4s ease-in-out infinite;\n}\n\n/* Thick glass structural illusion & inner shadows */\n.plasma-vial::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 40px;\n box-shadow:\n inset -6px -6px 15px rgba(0, 0, 0, 0.8),\n inset 6px 6px 15px rgba(255, 255, 255, 0.15);\n pointer-events: none;\n z-index: 10;\n}\n\n/* Curved specular highlight for 3D glass tube effect */\n.plasma-vial::before {\n content: \"\";\n position: absolute;\n top: 10px;\n left: 12px;\n width: 12px;\n height: 170px;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.6) 0%,\n rgba(255, 255, 255, 0) 80%\n );\n border-radius: 10px;\n filter: blur(1px);\n pointer-events: none;\n z-index: 10;\n}\n\n/* Hardware base anchoring the vial */\n.vial-base {\n width: 100px;\n height: 20px;\n background: linear-gradient(90deg, #1a1c23, #2a2d38, #1a1c23);\n border-radius: 10px;\n margin-top: -10px;\n z-index: 20;\n box-shadow:\n 0 10px 20px rgba(0, 0, 0, 0.8),\n inset 0 2px 2px rgba(255, 255, 255, 0.1),\n 0 -2px 10px rgba(0, 255, 204, 0.3);\n border: 1px solid #333;\n}\n\n/* The gooey physics chamber */\n.fluid-chamber {\n position: absolute;\n inset: -10px; /* Slight overflow to hide edge artifacts from filter */\n /* SVG Matrix filter for the liquid merging effect + hue shift */\n filter: url('data:image/svg+xml,#g');\n -webkit-filter: url('data:image/svg+xml,#g');\n animation: fluid-colors 6s ease-in-out infinite;\n z-index: 1;\n}\n\n/* Shared properties for all liquid bodies */\n.plasma-pool,\n.droplet {\n position: absolute;\n background: linear-gradient(\n 180deg,\n var(--neon-cyan) 10%,\n var(--neon-blue) 90%\n );\n border-radius: 50%;\n}\n\n/* Stationary fluid masses at top and bottom */\n.bottom-pool {\n width: 100px;\n height: 60px;\n bottom: 0;\n left: 0;\n border-radius: 40% 60% 50% 50%;\n animation: pool-shift 4s ease-in-out infinite alternate;\n}\n\n.top-pool {\n width: 100px;\n height: 40px;\n top: 0;\n left: 0;\n border-radius: 50% 50% 60% 40%;\n opacity: 0.8;\n animation: pool-shift 3s ease-in-out infinite alternate-reverse;\n}\n\n/* Individual anti-gravity droplets */\n.droplet {\n bottom: 20px;\n}\n\n.d-1 {\n width: 35px;\n height: 35px;\n left: 15px;\n animation: antigrav-flow 4s cubic-bezier(0.4, 0.1, 0.3, 1) infinite;\n}\n\n.d-2 {\n width: 45px;\n height: 45px;\n left: 35px;\n animation: antigrav-flow 5.5s cubic-bezier(0.5, 0.1, 0.2, 1) infinite 1.2s;\n}\n\n.d-3 {\n width: 24px;\n height: 24px;\n left: 55px;\n animation: antigrav-flow 3.8s cubic-bezier(0.4, 0.2, 0.4, 1) infinite 0.7s;\n}\n\n.d-4 {\n width: 28px;\n height: 28px;\n left: 25px;\n animation: antigrav-flow 4.5s cubic-bezier(0.3, 0.1, 0.4, 1) infinite 2.5s;\n}\n\n.d-5 {\n width: 20px;\n height: 20px;\n left: 45px;\n animation: antigrav-flow 3s cubic-bezier(0.4, 0.1, 0.2, 1) infinite 3s;\n}\n\n/* --- KEYFRAMES --- */\n\n@keyframes antigrav-flow {\n 0% {\n transform: translateY(20px) scale(0.8) rotate(0deg);\n }\n 50% {\n transform: translateY(-170px) scale(1.15) rotate(180deg);\n }\n 100% {\n transform: translateY(20px) scale(0.8) rotate(360deg);\n }\n}\n\n@keyframes pool-shift {\n 0% {\n transform: scaleX(1) translateX(-5px);\n }\n 100% {\n transform: scaleX(1.1) translateX(5px);\n }\n}\n\n@keyframes fluid-colors {\n 0%,\n 100% {\n filter: url('data:image/svg+xml,#g')\n hue-rotate(0deg);\n }\n 50% {\n filter: url('data:image/svg+xml,#g')\n hue-rotate(40deg);\n }\n}\n\n@keyframes vial-pulse {\n 0%,\n 100% {\n box-shadow:\n 0 0 20px 0 rgba(0, 255, 204, 0.1),\n inset 0 0 25px rgba(0, 102, 255, 0.4),\n inset 0 -15px 30px rgba(0, 255, 204, 0.2);\n }\n 50% {\n box-shadow:\n 0 0 35px 5px rgba(0, 255, 204, 0.25),\n inset 0 0 40px rgba(0, 102, 255, 0.6),\n inset 0 -20px 45px rgba(0, 255, 204, 0.4);\n }\n}\n"}

sweet-mayfly-18

👁 实时预览

📝 源代码