{"html":"

\n \n

First name

\n\n

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

\n\n

Ready for input

\n\n

\n \n\n","css":".input-container {\n position: relative;\n width: 400px;\n display: flex;\n flex-direction: column;\n align-items: center;\n z-index: 10;\n}\n\n.input-field-container {\n position: relative;\n width: 100%;\n margin-bottom: 30px;\n}\n\n.holo-input {\n width: 100%;\n height: 60px;\n background: rgba(0, 12, 36, 0.7);\n border: none;\n outline: none;\n padding: 0 60px 0 20px;\n color: rgba(0, 195, 255, 0.9);\n font-family: \"Orbitron\", sans-serif;\n font-size: 18px;\n letter-spacing: 1px;\n backdrop-filter: blur(5px);\n -webkit-backdrop-filter: blur(5px);\n border-radius: 4px;\n box-shadow:\n 0 0 15px rgba(0, 140, 255, 0.3),\n inset 0 0 10px rgba(0, 0, 0, 0.8);\n transition: all 0.3s ease;\n text-shadow: 0 0 5px rgba(0, 160, 255, 0.7);\n z-index: 1;\n}\n\n.holo-input::placeholder {\n color: rgba(0, 110, 200, 0.4);\n transition: all 0.3s ease;\n}\n\n.input-border {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n border: 1px solid rgba(0, 150, 255, 0.4);\n border-radius: 4px;\n z-index: 2;\n}\n\n.input-border::before,\n.input-border::after {\n content: \"\";\n position: absolute;\n width: 20px;\n height: 20px;\n border: 1px solid rgba(0, 150, 255, 0.7);\n z-index: 2;\n transition: all 0.3s ease;\n}\n\n.input-border::before {\n top: -1px;\n left: -1px;\n border-right: none;\n border-bottom: none;\n}\n\n.input-border::after {\n bottom: -1px;\n right: -1px;\n border-left: none;\n border-top: none;\n}\n\n.holo-scan-line {\n position: absolute;\n width: 100%;\n height: 2px;\n background: linear-gradient(\n 90deg,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 150, 255, 0.5) 20%,\n rgba(255, 255, 255, 0.8) 50%,\n rgba(0, 150, 255, 0.5) 80%,\n rgba(0, 0, 0, 0) 100%\n );\n top: 0;\n left: 0;\n opacity: 0;\n filter: blur(1px);\n z-index: 3;\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.input-glow {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: radial-gradient(\n ellipse at center,\n rgba(0, 150, 255, 0.1) 0%,\n rgba(0, 0, 0, 0) 70%\n );\n opacity: 0;\n border-radius: 4px;\n z-index: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n\n.input-active-indicator {\n position: absolute;\n width: 10px;\n height: 10px;\n background: rgba(0, 150, 255, 0.7);\n border-radius: 50%;\n right: 20px;\n top: 25px;\n opacity: 0.3;\n box-shadow: 0 0 10px rgba(0, 150, 255, 0.5);\n transition: all 0.3s ease;\n z-index: 2;\n}\n\n.input-label {\n position: absolute;\n top: -30px;\n left: 0;\n color: rgba(0, 150, 255, 0.7);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n transition: all 0.3s ease;\n pointer-events: none;\n text-shadow: 0 0 5px rgba(0, 150, 255, 0.5);\n}\n\n.input-data-visualization {\n position: absolute;\n width: calc(100% - 40px);\n height: 3px;\n bottom: 12px;\n left: 20px;\n display: flex;\n justify-content: space-between;\n z-index: 2;\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n\n.data-segment {\n width: 4%;\n height: 100%;\n background: rgba(0, 150, 255, 0.3);\n transition: all 0.5s ease;\n}\n\n.data-segment:nth-child(even) {\n height: 5px;\n transform: translateY(-1px);\n}\n\n.input-particles {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 3;\n overflow: hidden;\n border-radius: 4px;\n}\n\n.input-particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(0, 150, 255, 0.7);\n border-radius: 50%;\n opacity: 0;\n filter: blur(1px);\n transition: all 0.3s ease;\n box-shadow: 0 0 5px rgba(0, 150, 255, 0.7);\n}\n\n.input-holo-overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background-image: linear-gradient(\n 90deg,\n rgba(0, 150, 255, 0.05) 25%,\n rgba(0, 150, 255, 0.02) 50%,\n rgba(0, 150, 255, 0.05) 75%\n );\n background-size: 8px 100%;\n opacity: 0.5;\n pointer-events: none;\n z-index: 4;\n mix-blend-mode: overlay;\n}\n\n.interface-lines {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.interface-line {\n position: absolute;\n background: rgba(0, 150, 255, 0.3);\n transition: all 0.3s ease;\n}\n\n.interface-line:nth-child(1) {\n width: 20px;\n height: 1px;\n top: 15px;\n right: 15px;\n}\n\n.interface-line:nth-child(2) {\n width: 1px;\n height: 20px;\n top: 15px;\n right: 15px;\n}\n\n.interface-line:nth-child(3) {\n width: 1px;\n height: 20px;\n bottom: 15px;\n left: 15px;\n}\n\n.interface-line:nth-child(4) {\n width: 20px;\n height: 1px;\n bottom: 15px;\n left: 15px;\n}\n\n.hex-decoration {\n position: absolute;\n width: 30px;\n height: 34px;\n background: transparent;\n clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n border: 1px solid rgba(0, 150, 255, 0.3);\n right: -15px;\n top: 50%;\n transform: translateY(-50%);\n opacity: 1;\n transition: all 0.3s ease;\n z-index: 2;\n}\n\n.input-status {\n position: absolute;\n bottom: -25px;\n right: 0;\n font-size: 12px;\n color: rgba(0, 150, 255, 0.5);\n letter-spacing: 1px;\n opacity: 0;\n transition: all 0.3s ease;\n pointer-events: none;\n text-transform: uppercase;\n}\n\n@keyframes scan-animation {\n 0% {\n top: 0;\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n top: 100%;\n opacity: 0;\n }\n}\n\n@keyframes data-pulse {\n 0% {\n transform: scaleY(1);\n }\n 50% {\n transform: scaleY(1.8);\n }\n 100% {\n transform: scaleY(1);\n }\n}\n\n@keyframes particle-float {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-10px);\n }\n}\n\n.holo-input:focus {\n background: rgba(0, 22, 46, 0.8);\n box-shadow:\n 0 0 20px rgba(0, 150, 255, 0.4),\n inset 0 0 15px rgba(0, 0, 0, 0.9);\n color: rgba(0, 210, 255, 1);\n}\n\n.holo-input:focus::placeholder {\n color: rgba(0, 150, 255, 0.3);\n transform: translateX(10px);\n}\n\n.holo-input:focus ~ .input-border {\n border-color: rgba(0, 180, 255, 0.7);\n}\n\n.holo-input:focus ~ .input-border::before,\n.holo-input:focus ~ .input-border::after {\n border-color: rgba(0, 180, 255, 1);\n width: 30px;\n height: 30px;\n}\n\n.holo-input:focus ~ .holo-scan-line {\n opacity: 1;\n animation: scan-animation 2s infinite ease-in-out;\n}\n\n.holo-input:focus ~ .input-glow {\n opacity: 1;\n}\n\n.holo-input:focus ~ .input-active-indicator {\n opacity: 1;\n background: rgba(0, 200, 255, 1);\n box-shadow: 0 0 15px rgba(0, 200, 255, 0.7);\n transform: scale(1.2);\n}\n\n.holo-input:focus ~ .input-label {\n color: rgba(0, 200, 255, 1);\n text-shadow: 0 0 10px rgba(0, 200, 255, 0.7);\n transform: translateY(-5px);\n}\n\n.holo-input:focus ~ .input-data-visualization {\n opacity: 1;\n}\n\n.holo-input:focus ~ .input-data-visualization .data-segment {\n animation: data-pulse 2s infinite;\n animation-delay: calc(var(--index) * 0.1s);\n}\n\n.holo-input:focus ~ .input-status {\n opacity: 1;\n}\n\n.holo-input:focus ~ .interface-lines .interface-line {\n background: rgba(0, 200, 255, 0.6);\n}\n\n.holo-input:focus ~ .hex-decoration {\n border-color: rgba(0, 200, 255, 0.6);\n box-shadow: 0 0 10px rgba(0, 200, 255, 0.3);\n transform: translateY(-50%) rotate(30deg);\n}\n\n.holo-input:focus ~ .input-particles .input-particle {\n opacity: 1;\n animation: particle-float 3s infinite ease-in-out;\n animation-delay: calc(var(--index) * 0.2s);\n}\n\n.holo-input:hover {\n background: rgba(0, 15, 40, 0.75);\n}\n\n.holo-input:hover ~ .input-active-indicator {\n opacity: 0.6;\n}\n\n.holo-input:hover ~ .hex-decoration {\n border-color: rgba(0, 180, 255, 0.5);\n}\n\n.power-indicator {\n position: absolute;\n width: 100%;\n height: 2px;\n background: linear-gradient(\n 90deg,\n rgba(0, 180, 255, 0.7) 0%,\n rgba(0, 180, 255, 0.3) 100%\n );\n bottom: 0;\n left: 0;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.3s ease;\n z-index: 3;\n}\n\n.holo-input:focus ~ .power-indicator {\n transform: scaleX(1);\n}\n\n.input-decoration {\n position: absolute;\n top: 50%;\n left: -30px;\n transform: translateY(-50%);\n width: 20px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-start;\n opacity: 0.7;\n transition: all 0.3s ease;\n z-index: 2;\n pointer-events: none;\n}\n\n.decoration-dot {\n width: 4px;\n height: 4px;\n background: rgba(0, 150, 255, 0.7);\n border-radius: 50%;\n margin: 3px 0;\n}\n\n.decoration-line {\n width: 15px;\n height: 1px;\n background: rgba(0, 150, 255, 0.5);\n margin: 3px 0;\n}\n\n.holo-input:focus ~ .input-decoration {\n opacity: 1;\n transform: translateY(-50%) translateX(-5px);\n}\n\n.holo-input:focus ~ .input-decoration .decoration-dot {\n background: rgba(0, 200, 255, 1);\n box-shadow: 0 0 5px rgba(0, 200, 255, 0.7);\n}\n\n.holo-input:focus ~ .input-decoration .decoration-line {\n background: rgba(0, 200, 255, 0.7);\n box-shadow: 0 0 3px rgba(0, 200, 255, 0.5);\n}\n"}

old-lionfish-90

👁 实时预览

📝 源代码