大家好，我是 Just，这里是「设计师工作日常」，今天分享的是当输入框获取焦点准备输入时，让输入框内提示文字跳起来的交互效果。

最新文章通过公众号「设计师工作日常」发布。

(目录)

整体效果

当输入框获取焦点准备输入时，让输入框内提示文字跳起来的交互效果。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<label class="label35">
  <input class="inp35" type="text" required>
  <span class="span35-box">
    <span class="span35-info">用</span>
    <span class="span35-info">户</span>
    <span class="span35-info">名</span>
  </span>
</label>

主体 label 和 input 标签，span 标签是模拟输入框内提示文字内容。

css 部分代码

.label35{
  width: 180px;
  position: relative;
  cursor: text;
}
.inp35{
  width: 100%;
  padding: 0 10px;
  height: 42px;
  border: 0;
  border-bottom: 2px solid #414141;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
  transition: .3s;
}
.span35-box{
  width: 100%;
  padding: 0 10px;
  color: #aaa;
  font-size: 16px;
  position: absolute;
  top: 9px;
  box-sizing: border-box;
  display: flex;
}
.span35-info{
  transition: .3s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
.span35-info:nth-of-type(2){
  transition-delay: 100ms;
}
.span35-info:nth-of-type(3){
  transition-delay: 200ms;
}
.inp35:focus + .span35-box .span35-info,.inp35:valid + .span35-box .span35-info{
  color: #3034d4;
  transform: translateY(-30px);
}
.inp35:focus,.inp35:valid{
  border-bottom: 2px solid #3034d4;
}

通过 :focus 和 :valid 伪选择器获取输入框的状态， 给 span 标签增加 transition 过渡属性，并且给单独的文字 span 标签添加 transition-delay 属性，分别设置不同的延迟参数，实现每个单独的提示文字依次跳起来的视觉效果。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>提示文字跳起来的输入框</title>
  </head>
  <body>
    <div class="app">
      <label class="label35">
        <input class="inp35" type="text" required>
        <span class="span35-box">
          <span class="span35-info">用</span>
          <span class="span35-info">户</span>
          <span class="span35-info">名</span>
        </span>
      </label>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label35{
  width: 180px;
  position: relative;
  cursor: text;
}
.inp35{
  width: 100%;
  padding: 0 10px;
  height: 42px;
  border: 0;
  border-bottom: 2px solid #414141;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
  transition: .3s;
}
.span35-box{
  width: 100%;
  padding: 0 10px;
  color: #aaa;
  font-size: 16px;
  position: absolute;
  top: 9px;
  box-sizing: border-box;
  display: flex;
}
.span35-info{
  transition: .3s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
.span35-info:nth-of-type(2){
  transition-delay: 100ms;
}
.span35-info:nth-of-type(3){
  transition-delay: 200ms;
}
.inp35:focus + .span35-box .span35-info,.inp35:valid + .span35-box .span35-info{
  color: #3034d4;
  transform: translateY(-30px);
}
.inp35:focus,.inp35:valid{
  border-bottom: 2px solid #3034d4;
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

我是 Just，这里是「设计师工作日常」，求点赞求关注！