Vue3+CSS实现一个非常丝滑的 input 标签上浮动画，设计师看了都点赞

大家好，我是大华！今天给大家分享一个超实用的input输入框效果。 在用户点击时会有一个非常丝滑的标签上浮动画，底部还会有颜色变化，大大提升了用户的体验。

一个好看且交互流畅的表单能够：

1.提升用户体验，让填写表单不再枯燥 2.明确当前焦点位置，减少用户输入错误 3.让页面看起来更专业、更现代化

效果预览

当用户点击输入框时，原本在输入框内的标签会平滑上浮并改变颜色，同时底部会出现一条颜色条从中间向两边展开，非常酷炫！

完整源码Github地址在文章末尾。

代码实现详解

HTML 结构

首先，我们来看一下基础的 HTML 结构：

html 复制代码

<div class="input-container">
  <input 
    type="text" 
    v-model="form.name" 
    @focus="activeField = 'name'"
    @blur="activeField = null"
    placeholder=" "
    required
  >
  <label>您的姓名</label>
  <div class="underline"></div>
  <span class="hint">请输入您的真实姓名</span>
</div>

这里有几个关键点：

1.我们使用placeholder=" "设置了一个空白的占位符，这是实现动画效果的关键； 2.@focus和@blur事件用于追踪当前哪个输入框被激活； 3.label标签是我们要做动画的元素； 4.underline是底部那条动画线条； 5.hint是输入框获得焦点时显示的提示文字；

CSS 样式

接下来是让这一切动起来的 CSS 代码：

css 复制代码

.input-container {
  position: relative;          
  width: 100%;               
  height: 50px;               
  margin-bottom: 25px;        
}

.input-container input {
  width: 100%;                /* 输入框宽度填满容器 */
  height: 100%;               /* 输入框高度填满容器 */
  border: none;               /* 去掉默认边框 */
  font-size: 16px;            /* 设置字体大小 */
  border-bottom: 2px solid #c0c0c0; /* 只显示底部边框，浅灰色 */
  padding-top: 15px;          /* 顶部内边距，为标签上浮留出空间 */
  background-color: transparent; /* 透明背景 */
  transition: all 0.3s ease;  /* 所有样式变化都有0.3秒的平滑过渡 */
}

.input-container label {
  position: absolute;          /* 绝对定位，可以精确控制位置 */
  bottom: 10px;               /* 初始位置：距离底部10px（在输入框内部） */
  left: 0;                    /* 左边对齐 */
  color: #808080;             /* 灰色文字 */
  pointer-events: none;       /* 禁止鼠标事件，让点击能穿透到下面的输入框 */
  transition: all 0.3s ease;  /* 所有样式变化都有0.3秒的平滑过渡 */
}

.input-container .underline {
  position: absolute;          /* 绝对定位 */
  bottom: 0;                  /* 贴底部对齐 */
  height: 2px;                /* 线条高度（粗细） */
  width: 100%;                /* 宽度填满容器 */
  background-color: #2c6fdb;  /* 蓝色背景 */
  transform: scaleX(0);       /* 初始状态：水平方向缩放为0（完全隐藏） */
  transition: all 0.3s ease;  /* 所有样式变化都有0.3秒的平滑过渡 */
}

/* 核心动画效果 - 标签上浮 */
.input-container input:focus ~ label,                    /* 当输入框获得焦点时，选择后面的label兄弟元素 */
.input-container input:not(:placeholder-shown) ~ label { /* 当输入框有内容时（placeholder不显示时），选择后面的label兄弟元素 */
  transform: translateY(-25px);  /* 向上移动25像素（标签上浮效果） */
  font-size: 14px;               /* 字体变小 */
  color: #2c6fdb;                /* 文字颜色变为蓝色 */
}

/* 核心动画效果 - 底部线条展开 */
.input-container input:focus ~ .underline,                    /* 当输入框获得焦点时，选择后面的underline兄弟元素 */
.input-container input:not(:placeholder-shown) ~ .underline { /* 当输入框有内容时，选择后面的underline兄弟元素 */
  transform: scaleX(1);         /* 水平方向缩放为1（完全显示，线条展开效果） */
}

这里使用了 CSS 的兄弟选择器~，当输入框获得焦点或者有内容时，会触发标签和底部线条的动画效果。

transform: translateY(-25px)让标签向上移动 transform: scaleX(1)让底部线条从 0 扩展到完整宽度 transition: all 0.3s ease让所有变化都有 0.3 秒的平滑过渡

Vue 3 交互逻辑

最后是 Vue 3 的 JavaScript 部分：

javascript 复制代码

const { createApp, ref } = Vue;

createApp({
  setup() {
    const form = ref({
      name: '',
      email: '',
      password: ''
    });
    
    const activeField = ref(null);
    
    const submitForm = () => {
      // 表单验证逻辑
      if (!form.value.name || !form.value.email || !form.value.password) {
        alert('请填写所有必填字段');
        return;
      }
      
      if (!validateEmail(form.value.email)) {
        alert('请输入有效的邮箱地址');
        return;
      }
      
      if (form.value.password.length < 8) {
        alert('密码长度至少为8个字符');
        return;
      }
      
      alert(`提交成功！\n姓名: ${form.value.name}\n邮箱: ${form.value.email}`);
    };
    
    const validateEmail = (email) => {
      const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return re.test(email);
    };
    
    return {
      form,
      activeField,
      submitForm
    };
  }
}).mount('#app');