CSS+JS实现input动态框效果

在短视频上看到过的一个特效，看起来还是很不错的，就跟着模仿了一个，喜欢的可以直接拿过去用！

CSS部分

 <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #1f2a39;
        }
        div{
            position: relative;
            margin-top: 30px;
            box-sizing: border-box;
        }
        input {
            width: 300px;
            padding: 15px;
            outline: 0;
            border: 1px solid #414c5d;
            background-color: transparent;
            font-size: 17px;
            color: #fff;
        }
        span {
            position: absolute;
            left: 12px;
            top: 14px;
            color: #5d6876;
            z-index: -1;
            padding: 0px 6px;
            transition: 0.4s;
        }
        input:focus{
            border-color: #5cfbde;
        }
        input:focus~span{
            color: #5cfbde;
            font-size: 13px;
            top: -6.5px;
            background-color: #1f2a39;
            z-index: 1;
            border-left: 1px solid #5cfbde;
            border-right: 1px solid #5cfbde;
        }

    </style>

HTML部分

 <div>
   <input type="text" class="FirstName"><span id="FirstName">FirstName</span>
 </div>
 <div>
    <input type="text" class="LastName"><span id="LastName">LastName</span>
 </div>

JS部分

const input1 = document.querySelector('.FirstName')
const input2 = document.querySelector('.LastName')
const span1 = document.querySelector('#FirstName')
const span2 = document.querySelector('#LastName')
    
input1.oninput = ()=>{
  if(input1.value !== '') {
        span1.style.opacity=0
    }else{
        span1.style.opacity=1
    }
}
input2.oninput = ()=>{
  if(input2.value !== '') {
        span2.style.opacity=0
    }else{
        span2.style.opacity=1
    }
}