效果
思路
定义三个元素，文本框，下划线，占位文字。input 聚焦时通过 ~ 选中兄弟元素，利用 required 属性 + css 中的 valid 验证，判断 input 中是否有输入。写入过渡效果。
实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>.form-item {width: 200px;height: 30px;margin: 200px auto;position: relative;border-bottom: 2px solid #000;}.form-item input:focus,.form-item input:focus-visible,.form-item input {position: absolute;top: 0;left: 0;border: none;inset: 0;outline: none;}.form-item label {left: 0;top: 0;position: absolute;transition: 0.4s ease;}.form-item .bar {position: absolute;display: block;transform: translate(-50%, -50%);background: #5264ae;transition: 0.4s ease;bottom: -4px;left: 50%;width: 0%;height: 2px;}.form-item input:focus ~ .bar {width: 100%;}.form-item input:valid ~ label,.form-item input:focus ~ label {color: #5264ae;transform: translateY(-30px);font-size: 16px;}</style></head><body><div class="form-item"><input required id="username" type="text" /><span class="bar"></span><label for="username">User Name</label></div><script></script></body>
</html>