{"html":"

\n \n Enter Text\n

","css":"/* use it in dark theme */\n.input-container {\n position: relative;\n margin: 50px auto;\n width: 190px;\n}\n\n.input-container input[type=\"text\"] {\n font-size: 20px;\n color: rgb(255, 255, 255);\n border: none;\n border-bottom: 2px solid #a5a2a2;\n outline: none;\n width: 100%;\n background-color: transparent;\n}\n\n.label {\n transition: all 0.3s ease;\n color: #d3d2d2;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n}\n\n.input-container input[type=\"text\"]:focus~.label,\n .input-container input[type=\"text\"]:valid~.label {\n top: -20px;\n transition: 0.3s;\n color: rgb(172, 46, 172);\n}\n\n.input-container .underline {\n position: absolute;\n bottom: 4px;\n left: -7px;\n height: 2px;\n width: 110%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n}\n\n.input-container .sideline {\n position: relative;\n bottom: 15px;\n right: 18px;\n height: 2px;\n width: 18%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n rotate: 90deg;\n}\n\n.input-container .upperline {\n position: absolute;\n bottom: 30px;\n left: -8px;\n height: 2px;\n width: 110%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n}\n\n.input-container .line {\n position: relative;\n bottom: 17px;\n left: 178px;\n height: 2px;\n width: 18%;\n background-color: rgb(172, 46, 172);\n transform: scaleX(0);\n rotate: 90deg;\n}\n\n.input-container input[type=\"text\"]:focus~.underline,\n .input-container input[type=\"text\"]:valid~.underline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.sideline,\n .input-container input[type=\"text\"]:valid~.sideline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.upperline,\n .input-container input[type=\"text\"]:valid~.upperline {\n transform: scaleX(1);\n transition: 1s;\n}\n\n.input-container input[type=\"text\"]:focus~.line,\n .input-container input[type=\"text\"]:valid~.line {\n transform: scaleX(1);\n transition: 1s;\n}"}

foolish-panda-69

👁 实时预览

📝 源代码