直播平臺製作，html+css復刻登入輸入框

zhibo系統開發發表於2023-04-07
HTMLCSS

直播平臺製作，html+css復刻登入輸入框

<!DOCTYPE html>
<html>
<!--
    *Material文字框
    *作者：程式設計師阿諾斯
    *時間：2023-3-5 0：50
-->
<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>Material文字框</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    html,body {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .form-item {
        width: 300px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-bottom: 1px solid #bbb7b7;
    }
    #userName {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        color: #dbdcdf;
    }
    .bar {
        display: block;
        margin: 0 auto;
        width: 0;
        height: 2px;
        background-color: #5264ae;
        transition: 0.4s ease;
    }
    label {
        font-size: 26px;
        position: absolute;
        top: -7px;
        left: 0;
        transition: 0.4s ease;
    }
    .form-item input:focus~.bar {
        width: 100%;
    }
    .form-item input:valid~label {
        color: #5264ae;
        transform: translateY(-30px);
    }
    .form-item input:focus~label {
        color: #5264ae;
        transform: translateY(-30px);
    }
</style>
<body>
    <div class="form-item">
        <input type="text" required id="userName">
        <span class="bar"></span>
        <label for="userName"> User Name</label>
    </div>
</body>
</html>


以上就是直播平臺製作，html+css復刻登入輸入框， 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2944374/，如需轉載，請註明出處，否則將追究法律責任。

相關文章