申明：这是我在抖音的一位叫做"青牛前端"的博主上刷到的，我觉得效果非常炫酷，所以尝试模仿一下，并且解决了他的一个小问题（也可能是博主没有发进阶版），下面为效果展示图：
首先是静态页面布局，大致如下：
<div class="form_div">
<div class="form_item">
<input type="text" name="username" id="username" autocomplete="off">
<label for="username">username</label>
</div>
<div class="form_item">
<input type="password" name="password" id="password" autocomplete="off">
<label for="password">password</label>
</div>
<button class="submit">提交</button>
</div>
有一个后续需要用到的小细节，为了能在input的聚焦伪类中能通过查找兄弟节点找到对应的元素，最好将label放在input框之下，因为查找兄弟节点总是查找位于自身之下的兄弟节点
css的一些思路:
- input与label的布局是相对定位嵌套绝对定位的模式，慢慢调整位置
- input框的内容区域的背景色，一开始我是直接设置跟登录框一样的颜色（默认为白色），但考虑到以后的使用颜色变化需要修改，于是直接将背景设置为透明
background-color: transparent; - input框的聚焦的边框，它需要设置的属性为
outline: none;
然后完成一个个跳动的字的动画，我们在label中输入的是一个完整的单词，需要使用js将一个单词拆分为一个个字母，这里使用split进行拆分，它的用法如下：
const data="username"
console.log(data.split(''))
知道了字母的处理方法之后，先获取label中的单词，再将每个label中的单词拆分为字母，使用span标签将字母进行组合，并将原先label中的单词进行文本覆盖，因为我们获取到的是一个数组，并且需要返回文本覆盖值，因此可以使用map处理数组：
labels.forEach((label) => {
label.innerHTML = label.innerText.split('').map((letter, index) => {
return `<span>${letter}</span>`
}).join('')
})