{"html":"

\n","css":".black-hole {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.black-hole::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 150%;\n height: 140%;\n background: radial-gradient(ellipse at 50% 55%, transparent 10%, black 50%);\n z-index: 2;\n}\n\n.black-hole::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n height: 100%;\n background: radial-gradient(ellipse at 50% 75%, #a900ff 20%, transparent 75%);\n mix-blend-mode: overlay;\n z-index: 5;\n}\n\n.aura {\n position: absolute;\n top: -71.5%;\n left: 50%;\n transform: translateX(-50%);\n width: 30%;\n height: 400%;\n background: linear-gradient(\n 20deg,\n #00f8f1,\n #ffbd1e20 16.5%,\n #fe848f 33%,\n #fe848f20 49.5%,\n #00f8f1 66%,\n #00f8f160 85.5%,\n #ffbd1e 100%\n );\n background-size: 100% 200%;\n border-radius: 0 0 100% 100%;\n filter: blur(50px);\n mix-blend-mode: plus-lighter;\n opacity: 0.75;\n z-index: 3;\n animation: aura-glow 5s infinite linear;\n}\n\n.overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n transparent,\n transparent 1px,\n white 1px,\n white 2px\n );\n mix-blend-mode: overlay;\n opacity: 0.5;\n z-index: 10;\n}\n\n.tunnel {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80%;\n height: 80%;\n z-index: 1;\n}\n\n.ring {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n border: 1px solid #444;\n animation: ring-pulse 10s infinite linear;\n}\n\n@keyframes aura-glow {\n 0% {\n background-position: 0 100%;\n }\n 100% {\n background-position: 0 300%;\n }\n}\n\n@keyframes ring-pulse {\n 0% {\n width: 0;\n height: 0;\n opacity: 1;\n }\n 100% {\n width: 100%;\n height: 100%;\n opacity: 0;\n }\n}\n\n/* Create multiple rings with different sizes and delays */\n.ring:nth-child(1) {\n animation-delay: 0s;\n width: 10%;\n height: 10%;\n}\n.ring:nth-child(2) {\n animation-delay: 1s;\n width: 20%;\n height: 20%;\n}\n.ring:nth-child(3) {\n animation-delay: 2s;\n width: 30%;\n height: 30%;\n}\n.ring:nth-child(4) {\n animation-delay: 3s;\n width: 40%;\n height: 40%;\n}\n.ring:nth-child(5) {\n animation-delay: 4s;\n width: 50%;\n height: 50%;\n}\n.ring:nth-child(6) {\n animation-delay: 5s;\n width: 60%;\n height: 60%;\n}\n.ring:nth-child(7) {\n animation-delay: 6s;\n width: 70%;\n height: 70%;\n}\n.ring:nth-child(8) {\n animation-delay: 7s;\n width: 80%;\n height: 80%;\n}\n.ring:nth-child(9) {\n animation-delay: 8s;\n width: 90%;\n height: 90%;\n}\n.ring:nth-child(10) {\n animation-delay: 9s;\n width: 100%;\n height: 100%;\n}\n"}

bright-tiger-94

👁 实时预览

📝 源代码