效果展示
输入文本波形动画1.png
输入文本波形动画2.png
输入文本波形动画3.png
CSS 知识点
- 绝对定位
实现页面基础布局
<div class="input_box">
<input type="text" required />
<!-- 动画实际执行者 -->
<label>Wavy Input Text Aimation</label>
</div>
使用 JS 把 label 标签的文字拆分成单个 span 标签
let label = document.querySelector("label");
label.innerHTML = label.innerText
.split("")
.map((letters, i) => {
return `<span style="transition-delay: ${i * 30}ms;filter: hue-rotate(${
i * 10
}deg)">${letters}</span>`;
})
.join("");
编写输入框样式
.input_box input {
position: relative;
width: 100%;
padding: 10px 0;
background: transparent;
border: none;
outline: none;
border-bottom: 2px solid #999;
color: #fff;
font-size: 1.25em;
letter-spacing: 0.05em;
transform: 0.5s;
}
编写 label 标签下的 span 标签样式
.input_box label {
position: absolute;
left: 0;
padding: 10px 0;
pointer-events: none;
color: #666;
user-select: none;
}
.input_box label span {
position: relative;
display: inline-block;
flex-direction: row;
font-size: 1.25em;
letter-spacing: 0.05em;
transition: 0.25s cubic-bezier(0.5, 1, 0.5, 1.5);
}
编写输入框事件触发后的动画
.input_box input:focus ~ label span,
.input_box input:valid ~ label span {
color: #0f0;
text-shadow: 0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0;
transform: translateY(-30px);
}
.input_box input:focus,
.input_box input:valid {
border-bottom: 2px solid #fff;
}
