直播平台制作，html+css复刻登录输入框

<!DOCTYPE html><br><html><br><!--<br>    *Material文本框<br>    *作者：程序员阿诺斯<br>    *时间：2023-3-5 0：50<br>--><br><head><br>    <meta charset="UTF-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br>    <title>Material文本框</title><br></head><br><style><br>    * {<br>        margin: 0;<br>        padding: 0;<br>    }<br>    html,body {<br>        width: 100%;<br>        height: 100%;<br>        position: relative;<br>    }<br>    .form-item {<br>        width: 300px;<br>        height: 40px;<br>        position: absolute;<br>        top: 50%;<br>        left: 50%;<br>        transform: translate(-50%, -50%);<br>        border-bottom: 1px solid #bbb7b7;<br>    }<br>    #userName {<br>        width: 100%;<br>        height: 100%;<br>        border: none;<br>        outline: none;<br>        color: #dbdcdf;<br>    }<br>    .bar {<br>        display: block;<br>        margin: 0 auto;<br>        width: 0;<br>        height: 2px;<br>        <br>        transition: 0.4s ease;<br>    }<br>    label {<br>        font-size: 26px;<br>        position: absolute;<br>        top: -7px;<br>        left: 0;<br>        transition: 0.4s ease;<br>    }<br>    .form-item input:focus~.bar {<br>        width: 100%;<br>    }<br>    .form-item input:valid~label {<br>        color: #5264ae;<br>        transform: translateY(-30px);<br>    }<br>    .form-item input:focus~label {<br>        color: #5264ae;<br>        transform: translateY(-30px);<br>    }<br></style><br><body><br>    <div class="form-item"><br>        <input type="text" required id="userName"><br>        <span class="bar"></span><br>        <label for="userName"> User Name</label><br>    </div><br></body><br></html>