{"html":"

\n \n

\n","css":".ui-input-container {\n position: relative;\n width: 300px;\n}\n\n.ui-input {\n width: 100%;\n padding: 10px 10px 10px 40px;\n font-size: 1em;\n border: none;\n border-bottom: 2px solid #ccc;\n outline: none;\n background-color: transparent;\n transition: border-color 0.3s;\n}\n\n.ui-input:focus {\n border-color: #6c63ff;\n}\n\n.ui-input-underline {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 2px;\n width: 100%;\n background-color: #6c63ff;\n transform: scaleX(0);\n transition: transform 0.3s;\n}\n\n.ui-input:focus + .ui-input-underline {\n transform: scaleX(1);\n}\n\n.ui-input-highlight {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 0;\n background-color: rgba(108, 99, 255, 0.1);\n transition: width 0.3s;\n}\n\n.ui-input:focus ~ .ui-input-highlight {\n width: 100%;\n}\n\n.ui-input-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: #999;\n transition: color 0.3s;\n}\n\n.ui-input:focus ~ .ui-input-icon {\n color: #6c63ff;\n}\n\n.ui-input-icon svg {\n width: 20px;\n height: 20px;\n}\n"}

little-bulldog-27

👁 实时预览

📝 源代码