{"html":"

\n \n

ENTER

NAME

\n","css":".futuristic-input {\n width: 15em;\n height: 6em;\n position: relative;\n overflow: hidden;\n --firstcolor: #171033;\n --secondcolor: #171033;\n transition: all 0.25s ease-in-out;\n padding: 0em;\n margin: 0em;\n animation: changeborder 2.5s infinite linear;\n}\n\n@keyframes changeborder {\n 0% {\n border: 0.1em solid #515267;\n border-left: 0.1em solid white;\n }\n 25% {\n border: 0.1em solid #515267;\n border-top: 0.1em solid white;\n }\n 50% {\n border: 0.1em solid #515267;\n border-right: 0.1em solid white;\n }\n 70% {\n border: 0.1em solid #515267;\n border-bottom: 0.1em solid white;\n }\n 100% {\n border: 0.1em solid #515267;\n border-left: 0.1em solid white;\n }\n}\n\n.futuristic-input:hover {\n transform: scale(1.1);\n animation: spawn-light 1s;\n animation-iteration-count: 1s;\n}\n\n@keyframes spawn-light {\n 0% {\n background-color: white;\n box-shadow: 0em 0em 5em white;\n }\n 50% {\n box-shadow: 0em 0em 0em white;\n }\n 100% {\n background-color: rgb(255, 255, 255, 0);\n }\n}\n.input {\n width: 80%;\n height: 1.75em;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-left: none;\n border-top: none;\n border-right: none;\n border-bottom: 0.15em solid white;\n background-color: var(--firstcolor);\n font-weight: bold;\n padding-left: 0.25em;\n color: white;\n outline: none;\n font-weight: 100;\n}\n.triangle-input-up {\n width: 0em;\n height: 0em;\n border-left: 1em solid transparent;\n border-bottom: 1em solid var(--secondcolor);\n}\n.triangle-input-left {\n width: 0em;\n height: 0em;\n border-right: 1em solid transparent;\n border-bottom: 1em solid var(--firstcolor);\n}\n.triangle-input-left2 {\n width: 0em;\n height: 0em;\n border-right: 1em solid transparent;\n border-bottom: 1em solid white;\n}\n.triangle-input-down {\n width: 0em;\n height: 0em;\n border-bottom: 1em solid transparent;\n border-left: 1em solid var(--firstcolor);\n}\n.triangle-input-right {\n width: 0em;\n height: 0em;\n border-left: 1em solid transparent;\n border-top: 1em solid var(--secondcolor);\n}\n.triangle-input-right2 {\n width: 0em;\n height: 0em;\n border-left: 1em solid transparent;\n border-top: 1em solid white;\n}\n.futuristic-input-space {\n width: 100%;\n height: 1em;\n display: flex;\n}\n\n.futuristic-input-space2 {\n width: 100%;\n height: 1em;\n display: flex;\n justify-content: flex-end;\n}\n.triangle-input-bar {\n width: 100%;\n height: 100%;\n background-color: var(--firstcolor);\n}\n.triangle-input-bar2 {\n width: 5em;\n height: 100%;\n background-color: var(--firstcolor);\n}\n.triangle-input-bar3 {\n width: 3em;\n height: 100%;\n background-color: white;\n}\n.futuristic-input-space-2 {\n width: 2em;\n height: 1em;\n display: flex;\n}\n\n.futuristic-input-enter {\n color: white;\n top: -0.35em;\n position: absolute;\n left: 3.2em;\n font-weight: bold;\n animation: color-change 2.5s infinite linear;\n -webkit-text-stroke: 0.01em white;\n font-size: 1.25em;\n text-shadow: 1em 0em 1em white;\n}\n\n.futuristic-input-name {\n color: white;\n bottom: -0.4em;\n position: absolute;\n right: 3.25em;\n font-weight: bold;\n animation: color-change 2.5s infinite linear 0.5s;\n -webkit-text-stroke: 0.01em white;\n font-size: 1.25em;\n text-shadow: -2em 0em 1em white;\n}\n\n@keyframes color-change {\n 0% {\n color: white;\n }\n 25% {\n color: white;\n }\n 30% {\n color: transparent;\n }\n 35% {\n color: white;\n }\n 40% {\n color: transparent;\n }\n 45% {\n color: white;\n }\n 100% {\n color: white;\n }\n}\n"}

quick-shrimp-49

👁 实时预览

📝 源代码