{"html":"

\n \n Email Address\n

\n \n \n

\n","css":".email-input-container {\n position: relative;\n margin: 20px 0;\n width: 300px;\n}\n\n.email-input-container input[type=\"email\"] {\n width: 100%;\n padding: 10px 10px;\n border: none;\n border-radius: 5px;\n font-size: 16px;\n background-color: #fff;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n transition:\n box-shadow 0.3s ease,\n padding 0.3s ease;\n}\n\n.email-input-container input[type=\"email\"]:focus {\n outline: none;\n box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);\n padding-top: 12px; /* Adjust padding on focus */\n}\n\n.email-input-container label {\n position: absolute;\n left: 10px;\n top: 7px;\n font-size: 16px;\n color: #aaa;\n transition: 0.2s ease all;\n pointer-events: none; /* Prevents label from interfering with input */\n}\n\n.email-input-container input[type=\"email\"]:focus + label,\n.email-input-container input[type=\"email\"]:valid + label {\n top: -15px;\n left: 0px;\n font-size: 22px;\n color: #4a90e2;\n transform: translateY(-50%) scale(0.8);\n}\n\n.email-input-container .email-input-border {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 4px;\n background-color: #4a90e2;\n transform: scaleX(0);\n transition: transform 0.3s ease;\n}\n\n.email-input-container .email-input-border::before,\n.email-input-container .email-input-border::after {\n content: \"\";\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: #4a90e2;\n border-radius: 50%;\n transition: transform 0.3s ease;\n}\n\n.email-input-container .email-input-border::before {\n left: -10px;\n transform: translateX(-50%) scale(0);\n}\n\n.email-input-container .email-input-border::after {\n right: -10px;\n transform: translateX(50%) scale(0);\n}\n\n.email-input-container input[type=\"email\"]:focus ~ .email-input-border,\n.email-input-container input[type=\"email\"]:valid ~ .email-input-border {\n transform: scaleX(1);\n}\n\n.email-input-container input[type=\"email\"]:focus ~ .email-input-border::before,\n.email-input-container input[type=\"email\"]:focus ~ .email-input-border::after,\n.email-input-container input[type=\"email\"]:valid ~ .email-input-border::before,\n.email-input-container input[type=\"email\"]:valid ~ .email-input-border::after {\n transform: scale(1);\n}\n"}

perfect-zebra-100

👁 实时预览

📝 源代码