{"html":"

\n\n

CYBER

CORE

System Online

\n","css":".card-wrapper {\n position: relative;\n width: 320px;\n height: 480px;\n}\n\n.mouse-position-tracker {\n position: absolute;\n width: 33.333%;\n height: 33.333%;\n z-index: 10;\n}\n\n.tr-1 {\n top: 0;\n left: 0;\n}\n.tr-2 {\n top: 0;\n left: 33.333%;\n}\n.tr-3 {\n top: 0;\n left: 66.666%;\n}\n.tr-4 {\n top: 33.333%;\n left: 0;\n}\n.tr-5 {\n top: 33.333%;\n left: 33.333%;\n}\n.tr-6 {\n top: 33.333%;\n left: 66.666%;\n}\n.tr-7 {\n top: 66.666%;\n left: 0;\n}\n.tr-8 {\n top: 66.666%;\n left: 33.333%;\n}\n.tr-9 {\n top: 66.666%;\n left: 66.666%;\n}\n\n.card {\n position: absolute;\n inset: 0;\n background: rgba(10, 10, 10, 0.8);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 20px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition:\n transform 0.2s ease-out,\n box-shadow 0.2s ease;\n transform-style: preserve-3d;\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n backdrop-filter: blur(10px);\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(rgba(0, 243, 255, 0.1) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 243, 255, 0.1) 1px, transparent 1px);\n background-size: 30px 30px;\n opacity: 0.5;\n mask-image: radial-gradient(circle at center, white, transparent 80%);\n z-index: 1;\n pointer-events: none;\n}\n\n.card::after {\n content: \"\";\n position: absolute;\n width: 200%;\n height: 200%;\n background: radial-gradient(\n circle at center,\n rgba(0, 243, 255, 0.2),\n transparent 50%\n );\n top: -50%;\n left: -50%;\n opacity: 0;\n transition: 0.3s;\n z-index: 0;\n pointer-events: none;\n}\n\n.content {\n z-index: 5;\n transform: translateZ(40px);\n text-align: center;\n pointer-events: none;\n}\n\n.title {\n font-size: 3.5rem;\n font-weight: 900;\n color: #fff;\n text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);\n line-height: 1;\n position: relative;\n mix-blend-mode: lighten;\n}\n\n.subtitle {\n margin-top: 10px;\n color: var(--neon-blue);\n letter-spacing: 3px;\n font-size: 0.8rem;\n text-transform: uppercase;\n}\n\n.hud-corner {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid var(--neon-blue);\n transition: 0.3s;\n z-index: 4;\n}\n.tl {\n top: 20px;\n left: 20px;\n border-right: none;\n border-bottom: none;\n}\n.tr {\n top: 20px;\n right: 20px;\n border-left: none;\n border-bottom: none;\n}\n.bl {\n bottom: 20px;\n left: 20px;\n border-right: none;\n border-top: none;\n}\n.br {\n bottom: 20px;\n right: 20px;\n border-left: none;\n border-top: none;\n}\n\n.glitch {\n position: relative;\n}\n.glitch::before,\n.glitch::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(10, 10, 10, 0.8);\n}\n.glitch::before {\n left: 2px;\n text-shadow: -1px 0 #ff00c1;\n clip: rect(44px, 450px, 56px, 0);\n animation: glitch-anim 5s infinite linear alternate-reverse;\n}\n.glitch::after {\n left: -2px;\n text-shadow: -1px 0 #00fff9;\n clip: rect(44px, 450px, 56px, 0);\n animation: glitch-anim2 5s infinite linear alternate-reverse;\n}\n\n@keyframes glitch-anim {\n 0% {\n clip: rect(15px, 9999px, 81px, 0);\n }\n 5% {\n clip: rect(72px, 9999px, 24px, 0);\n }\n 10% {\n clip: rect(4px, 9999px, 88px, 0);\n }\n 15% {\n clip: rect(66px, 9999px, 14px, 0);\n }\n 20% {\n clip: rect(25px, 9999px, 96px, 0);\n }\n 100% {\n clip: rect(50px, 9999px, 50px, 0);\n }\n}\n@keyframes glitch-anim2 {\n 0% {\n clip: rect(80px, 9999px, 4px, 0);\n }\n 5% {\n clip: rect(30px, 9999px, 100px, 0);\n }\n 10% {\n clip: rect(10px, 9999px, 20px, 0);\n }\n 100% {\n clip: rect(90px, 9999px, 90px, 0);\n }\n}\n\n.tr-1:hover ~ .card {\n transform: rotateX(20deg) rotateY(-20deg);\n}\n.tr-1:hover ~ .card::after {\n opacity: 1;\n transform: translate(-20%, -20%);\n}\n\n.tr-2:hover ~ .card {\n transform: rotateX(20deg) rotateY(0deg);\n}\n.tr-2:hover ~ .card::after {\n opacity: 1;\n transform: translate(0%, -20%);\n}\n\n.tr-3:hover ~ .card {\n transform: rotateX(20deg) rotateY(20deg);\n}\n.tr-3:hover ~ .card::after {\n opacity: 1;\n transform: translate(20%, -20%);\n}\n\n.tr-4:hover ~ .card {\n transform: rotateX(0deg) rotateY(-20deg);\n}\n.tr-4:hover ~ .card::after {\n opacity: 1;\n transform: translate(-20%, 0%);\n}\n\n.tr-5:hover ~ .card {\n transform: rotateX(0deg) rotateY(0deg) scale(1.05);\n box-shadow: 0 0 30px var(--neon-blue);\n}\n.tr-5:hover ~ .card::after {\n opacity: 1;\n transform: translate(0%, 0%);\n}\n\n.tr-6:hover ~ .card {\n transform: rotateX(0deg) rotateY(20deg);\n}\n.tr-6:hover ~ .card::after {\n opacity: 1;\n transform: translate(20%, 0%);\n}\n\n.tr-7:hover ~ .card {\n transform: rotateX(-20deg) rotateY(-20deg);\n}\n.tr-7:hover ~ .card::after {\n opacity: 1;\n transform: translate(-20%, 20%);\n}\n\n.tr-8:hover ~ .card {\n transform: rotateX(-20deg) rotateY(0deg);\n}\n.tr-8:hover ~ .card::after {\n opacity: 1;\n transform: translate(0%, 20%);\n}\n\n.tr-9:hover ~ .card {\n transform: rotateX(-20deg) rotateY(20deg);\n}\n.tr-9:hover ~ .card::after {\n opacity: 1;\n transform: translate(20%, 20%);\n}\n\n.card-wrapper:hover .hud-corner {\n box-shadow: 0 0 10px var(--neon-blue);\n width: 30px;\n height: 30px;\n}\n"}

quiet-jellyfish-9

👁 实时预览

📝 源代码