<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #container { position: relative; width: 300px; border-bottom: #a6a7a7 1px solid; } #container>#username { height: 30px; width: 100%; padding: 1em 0.5em; box-sizing: border-box; border: none; outline: none; } #container>#username:valid+.line, #container>#username:focus+.line, #container>#username:hover+.line { width: 100%; } #container>#username:valid+.line+label, #container>#username:focus+.line+label, #container>#username:hover+.line+label { top: 0; transform: translateY(-100%); } #container>.line { height: 2px; width: 0; background: blue; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: 0.3s; } #container>label { position: absolute; top: 50%; transform: translateY(-50%); left: 0.5em; transition: 0.3s; font-size: 16px; } /*# sourceMappingURL=index.css.map */ </style> </head> <body> <br> <div id="container"> <input type="text" id="username" required> <span class="line"></span> <label for="username">User Name</label> </div> </body> </html>
