效果展示

输入文本波形动画1.png

输入文本波形动画2.png

输入文本波形动画3.png

CSS 知识点

• 绝对定位

实现页面基础布局

<div class="input_box">
  <input type="text" required />
  <!-- 动画实际执行者 -->
  <label>Wavy&nbsp;Input&nbsp;Text&nbsp;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;
}

完整代码下载

完整代码下载