{"html":"

\n\n

\n","css":".loader-container {\n position: relative;\n width: 300px;\n height: 400px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.jellyfish {\n position: relative;\n width: 120px;\n height: 120px;\n margin-bottom: 60px;\n animation: float 3s ease-in-out infinite;\n}\n\n.jellyfish-head {\n width: 120px;\n height: 80px;\n background: radial-gradient(\n ellipse at center top,\n rgba(255, 255, 255, 0.9) 0%,\n rgba(173, 216, 230, 0.8) 30%,\n rgba(135, 206, 250, 0.7) 60%,\n rgba(70, 130, 180, 0.6) 100%\n );\n border-radius: 50% 50% 50% 50% / 100% 100% 40% 40%;\n position: relative;\n box-shadow:\n 0 0 20px rgba(173, 216, 230, 0.6),\n inset 0 -10px 20px rgba(255, 255, 255, 0.3);\n animation: pulse 2s ease-in-out infinite;\n}\n\n.jellyfish-head::before {\n content: \"\";\n position: absolute;\n top: 15px;\n left: 20px;\n width: 80px;\n height: 40px;\n background: radial-gradient(\n ellipse,\n rgba(255, 255, 255, 0.6) 0%,\n rgba(255, 255, 255, 0.2) 70%,\n transparent 100%\n );\n border-radius: 50%;\n animation: shimmer 2.5s ease-in-out infinite;\n}\n\n.tentacles {\n position: absolute;\n bottom: -160px;\n left: 50%;\n transform: translateX(-50%);\n width: 100%;\n height: 200px;\n}\n\n.tentacle {\n position: absolute;\n width: 4px;\n height: 100px;\n background: linear-gradient(\n to bottom,\n rgba(173, 216, 230, 0.8) 0%,\n rgba(135, 206, 250, 0.6) 50%,\n rgba(70, 130, 180, 0.4) 100%\n );\n border-radius: 2px;\n transform-origin: top center;\n}\n\n.tentacle:nth-child(1) {\n left: 20%;\n animation: sway1 3s ease-in-out infinite;\n height: 120px;\n}\n\n.tentacle:nth-child(2) {\n left: 35%;\n animation: sway2 2.5s ease-in-out infinite;\n height: 140px;\n}\n\n.tentacle:nth-child(3) {\n left: 50%;\n animation: sway3 3.2s ease-in-out infinite;\n height: 130px;\n}\n\n.tentacle:nth-child(4) {\n left: 65%;\n animation: sway4 2.8s ease-in-out infinite;\n height: 135px;\n}\n\n.tentacle:nth-child(5) {\n left: 80%;\n animation: sway5 3.5s ease-in-out infinite;\n height: 115px;\n}\n\n.loading-text {\n background: linear-gradient(\n 45deg,\n #1e3c72 0%,\n #2a5298 20%,\n #4a90e2 40%,\n #5cb3e6 60%,\n #7dd3fc 80%,\n #a3d9f0 100%\n );\n background-size: 300% 300%;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-size: 18px;\n font-weight: 300;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-top: 20px;\n animation: wave-colors 3s ease-in-out infinite;\n}\n\n.dots {\n display: inline-block;\n width: 40px;\n text-align: left;\n}\n\n.dots::after {\n content: \"\";\n animation: dots 2s steps(4, end) infinite;\n}\n\n.bubbles {\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.bubble {\n position: absolute;\n border-radius: 50%;\n background: radial-gradient(\n circle at 30% 30%,\n rgba(255, 255, 255, 0.8),\n rgba(173, 216, 230, 0.4)\n );\n animation: bubble-rise 4s linear infinite;\n opacity: 0;\n}\n\n.bubble:nth-child(1) {\n width: 8px;\n height: 8px;\n left: 20%;\n animation-delay: 0s;\n}\n\n.bubble:nth-child(2) {\n width: 12px;\n height: 12px;\n left: 70%;\n animation-delay: 1s;\n}\n\n.bubble:nth-child(3) {\n width: 6px;\n height: 6px;\n left: 40%;\n animation-delay: 2s;\n}\n\n.bubble:nth-child(4) {\n width: 10px;\n height: 10px;\n left: 60%;\n animation-delay: 0.5s;\n}\n\n.bubble:nth-child(5) {\n width: 5px;\n height: 5px;\n left: 80%;\n animation-delay: 1.5s;\n}\n\n.bubble:nth-child(6) {\n width: 9px;\n height: 9px;\n left: 25%;\n animation-delay: 2.5s;\n}\n\n@keyframes wave-colors {\n 0%,\n 100% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n}\n\n@keyframes float {\n 0%,\n 100% {\n transform: translateY(0px);\n }\n 50% {\n transform: translateY(-15px);\n }\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n transform: scale(1);\n box-shadow: 0 0 20px rgba(173, 216, 230, 0.6);\n }\n 50% {\n transform: scale(1.05);\n box-shadow: 0 0 30px rgba(173, 216, 230, 0.8);\n }\n}\n\n@keyframes shimmer {\n 0%,\n 100% {\n opacity: 0.6;\n }\n 50% {\n opacity: 1;\n }\n}\n\n@keyframes sway1 {\n 0%,\n 100% {\n transform: rotate(-8deg);\n }\n 50% {\n transform: rotate(12deg);\n }\n}\n\n@keyframes sway2 {\n 0%,\n 100% {\n transform: rotate(10deg);\n }\n 50% {\n transform: rotate(-15deg);\n }\n}\n\n@keyframes sway3 {\n 0%,\n 100% {\n transform: rotate(-5deg);\n }\n 50% {\n transform: rotate(8deg);\n }\n}\n\n@keyframes sway4 {\n 0%,\n 100% {\n transform: rotate(12deg);\n }\n 50% {\n transform: rotate(-10deg);\n }\n}\n\n@keyframes sway5 {\n 0%,\n 100% {\n transform: rotate(-10deg);\n }\n 50% {\n transform: rotate(15deg);\n }\n}\n\n@keyframes dots {\n 0% {\n content: \"\";\n }\n 25% {\n content: \".\";\n }\n 50% {\n content: \"..\";\n }\n 75% {\n content: \"...\";\n }\n 100% {\n content: \"\";\n }\n}\n\n@keyframes bubble-rise {\n 0% {\n bottom: -20px;\n opacity: 0;\n transform: translateX(0px) scale(0.5);\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n bottom: 120%;\n opacity: 0;\n transform: translateX(20px) scale(1.2);\n }\n}\n\n/* Responsive design */\n@media (max-width: 480px) {\n .loader-container {\n width: 250px;\n height: 350px;\n }\n\n .jellyfish {\n width: 100px;\n height: 100px;\n }\n\n .jellyfish-head {\n width: 100px;\n height: 65px;\n }\n\n .loading-text {\n font-size: 16px;\n }\n}\n"}

selfish-dodo-98

👁 实时预览

📝 源代码