分享一个实用纯css3的动画输入

先看效果

这效果比较简洁通用
先看看HTML

  <div class="inputBox">
        <span class="title">输入框获取焦点效果</span>
        <div class="wrapper">
          <div class="input-data">
            <input type="text" required>
            <div class="underline"></div>
             <label>您的姓名</label>
          </div>
        </div>
    </div>

下面是CSS

.inputBox{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: 100vh;
        background: linear-gradient(200deg);
    }
    .inputBox .wrapper{
        width: 450px;
        background-color: #fff;
        padding: 40px;
        margin-top: 150px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
    .inputBox .wrapper .input-data{
        position: relative;
        width: 100%;
        height: 40px;
    }
    .inputBox .wrapper .input-data input{
        width: 100%;
        height: 95%;
        border: none;
        outline: none;
        font-size: 17px;
        border-bottom: 2px solid #c0c0c0;
    }
    .inputBox .wrapper .input-data label{
        font-size: 16px;
    }
    /* 获取焦点时 */
    .inputBox .wrapper .input-data input:focus~label,
    /* 内容合法时 */
    .inputBox .wrapper .input-data input:valid~label{
        transform: translateY(-25px);
        font-size: 15px;
        color: #2c6fdb;
    }
    .inputBox .wrapper .input-data label{
        position: absolute;
        bottom: 10px;
        color: #808080;
        bottom: 10px;
        left: 0px;
        color: #808088;
        /* 这个属性可以使label穿透到输入框 */
        pointer-events: none;
        transition: all 0.3s ease;
    }
    .inputBox .wrapper .input-data .underline{
        position: absolute;
        bottom: 0;
        height: 2px;
        width: 100%;
        background-color: #2c6fdb;
        transform: scaleX(0);
        transition: all 0.3s ease;
    }
    .inputBox .wrapper .input-data input:focus ~ .underline,
    .inputBox .wrapper .input-data input:valid ~ .underline{
        transform: scaleX(1);
    }
    .title{
        font-size: 32px;
    }