{"html":"

\n VOID_DATA\n

\n\n \n\n \n \n \n \n \n \n \n \n \n

\n","css":".void-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n filter: url(\"#goo\");\n margin-top: 60px;\n}\n\n.void-wrapper .singularity {\n position: absolute;\n bottom: 50px;\n width: 60px;\n height: 60px;\n background: #000;\n border-radius: 50%;\n opacity: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n transform: translateY(40px) scale(0.1);\n}\n\n.void-wrapper .content {\n opacity: 0;\n transition: 0.3s;\n color: #fff;\n font-family: \"Syncopate\", sans-serif;\n font-size: 0.7rem;\n letter-spacing: 4px;\n text-shadow: 0 0 10px #fff;\n}\n\n.void-wrapper .event-horizon {\n position: relative;\n z-index: 2;\n padding: 20px 40px;\n background: #000;\n color: #fff;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n font-family: \"Syncopate\", sans-serif;\n font-weight: 900;\n letter-spacing: 2px;\n transition: 0.3s;\n box-shadow: 0 0 0px rgba(255, 255, 255, 0);\n}\n\n.void-wrapper:hover .singularity {\n opacity: 1;\n width: 180px;\n height: 80px;\n border-radius: 20px;\n transform: translateY(-60px) scale(1);\n}\n\n.void-wrapper:hover .content {\n opacity: 1;\n transition-delay: 0.4s;\n}\n\n.void-wrapper:hover .event-horizon {\n box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);\n transform: scale(0.95);\n letter-spacing: 6px;\n}\n\n.void-wrapper .singularity::before {\n content: \"\";\n position: absolute;\n inset: -5px;\n border-radius: inherit;\n background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);\n z-index: -1;\n filter: blur(10px);\n animation: rotate 2s linear infinite;\n opacity: 0;\n transition: 0.5s;\n}\n\n.void-wrapper:hover .singularity::before {\n opacity: 0.7;\n}\n\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n"}

purple-grasshopper-32

👁 实时预览

📝 源代码