{"html":"

\n \n ACCESS_CODE\n\n

\n\n

\n","css":"/* --- Root Variables & Wrapper --- */\n.glitch-input-wrapper {\n --bg-color: #0d0d0d;\n --primary-color: #00f2ea;\n --secondary-color: #a855f7;\n --text-color: #e5e5e5;\n --font-family: \"Fira Code\", Consolas, \"Courier New\", Courier, monospace;\n --glitch-anim-duration: 0.4s;\n\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: var(--font-family);\n font-size: 16px;\n padding: 3rem;\n}\n\n/* --- Container --- */\n.input-container {\n position: relative;\n width: 19rem;\n}\n\n/* --- Input --- */\n.holo-input {\n width: 100%;\n height: 3.5rem;\n background: rgba(13, 13, 13, 0.7);\n border: none;\n border-bottom: 2px solid #333;\n outline: none;\n padding: 0 1rem;\n color: var(--primary-color);\n font-family: inherit;\n font-size: 1.1rem;\n caret-color: var(--primary-color);\n z-index: 10;\n transition:\n background 0.3s ease,\n border-color 0.3s ease;\n}\n\n/* --- Floating Label --- */\n.input-label {\n position: absolute;\n top: 1rem;\n left: 1rem;\n color: var(--text-color);\n opacity: 0.6;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n pointer-events: none;\n transition: all 0.3s ease;\n z-index: 11;\n}\n.holo-input:focus + .input-label,\n.holo-input:not(:placeholder-shown) + .input-label {\n top: -1.5rem;\n left: 0;\n font-size: 0.8rem;\n opacity: 1;\n color: var(--primary-color);\n}\n\n.holo-input:focus + .input-label::before,\n.holo-input:focus + .input-label::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: #212121;\n}\n.holo-input:focus + .input-label::before {\n color: var(--secondary-color);\n animation: glitch-label var(--glitch-anim-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n}\n.holo-input:focus + .input-label::after {\n color: var(--primary-color);\n animation: glitch-label var(--glitch-anim-duration)\n cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both;\n}\n\n/* --- Decorative Layers --- */\n.input-border,\n.input-scanline,\n.input-glow,\n.input-corners {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n.input-border {\n border: 1px solid rgba(0, 242, 234, 0.2);\n opacity: 0.5;\n transition: all 0.3s ease;\n}\n.corner {\n position: absolute;\n width: 1rem;\n height: 1rem;\n border: 2px solid var(--primary-color);\n transition: all 0.3s ease;\n opacity: 0.5;\n}\n.corner-tl {\n top: -0.3rem;\n left: -0.3rem;\n border-right: none;\n border-bottom: none;\n}\n.corner-tr {\n top: -0.3rem;\n right: -0.3rem;\n border-left: none;\n border-bottom: none;\n}\n.corner-bl {\n bottom: -0.3rem;\n left: -0.3rem;\n border-right: none;\n border-top: none;\n}\n.corner-br {\n bottom: -0.3rem;\n right: -0.3rem;\n border-left: none;\n border-top: none;\n}\n\n.input-glow {\n background: radial-gradient(\n ellipse at center,\n rgba(0, 242, 234, 0.2) 0%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.input-scanline {\n height: 100%;\n background: linear-gradient(\n to bottom,\n transparent 0%,\n rgba(0, 242, 234, 0.1) 48%,\n rgba(0, 242, 234, 0.3) 50%,\n rgba(0, 242, 234, 0.1) 52%,\n transparent 100%\n );\n opacity: 0;\n}\n\n/* --- Data Visualization --- */\n.input-data-stream {\n position: absolute;\n bottom: 2px;\n left: 0;\n width: 100%;\n height: 0.3rem;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s ease 0.1s;\n}\n.stream-bar {\n flex-grow: 1;\n background-color: var(--primary-color);\n transition:\n transform 0.2s,\n opacity 0.2s;\n transform: scaleY(0);\n transform-origin: bottom;\n}\n\n.holo-input:focus {\n border-color: transparent;\n}\n.holo-input:focus ~ .input-border {\n opacity: 1;\n border-color: rgba(0, 242, 234, 0.5);\n}\n.holo-input:focus ~ .input-corners .corner {\n width: 1.25rem;\n height: 1.25rem;\n border-width: 3px;\n opacity: 1;\n}\n.holo-input:focus ~ .input-glow {\n opacity: 1;\n}\n.holo-input:focus ~ .input-scanline {\n animation: scan-vertical 4s linear infinite;\n}\n.holo-input:focus ~ .input-data-stream {\n opacity: 1;\n}\n.holo-input:focus ~ .input-data-stream .stream-bar {\n animation: data-pulse 2s infinite;\n animation-delay: calc(var(--i) * 0.1s);\n}\n\n/* --- Keyframes --- */\n@keyframes glitch-label {\n 0% {\n transform: translate(0);\n clip-path: inset(0 0 0 0);\n }\n 20% {\n transform: translate(-0.2rem, 0.1rem);\n clip-path: inset(50% 0 20% 0);\n }\n 40% {\n transform: translate(0.1rem, -0.1rem);\n clip-path: inset(20% 0 60% 0);\n }\n 60% {\n transform: translate(-0.15rem, 0.1rem);\n clip-path: inset(80% 0 5% 0);\n }\n 80% {\n transform: translate(0.15rem, -0.15rem);\n clip-path: inset(30% 0 45% 0);\n }\n 100% {\n transform: translate(0);\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes scan-vertical {\n 0% {\n opacity: 0;\n transform: translateY(-100%);\n }\n 25% {\n opacity: 0.5;\n }\n 75% {\n opacity: 0.5;\n }\n 100% {\n opacity: 0;\n transform: translateY(100%);\n }\n}\n\n@keyframes data-pulse {\n 0%,\n 100% {\n transform: scaleY(0.2);\n opacity: 0.3;\n }\n 50% {\n transform: scaleY(1);\n opacity: 0.8;\n }\n}\n"}

rude-cobra-30

👁 实时预览

📝 源代码