纯css实现登录表单动效-Toy模板网

这篇具有很好参考价值的文章主要介绍了纯css实现登录表单动效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

纯css实现登录表单动效,css,前端文章来源地址https://www.toymoban.com/news/detail-630769.html

代码展示

// 我这边用的是elementUI表单校验，更改的样式。
<el-form
      :model="form"
      :rules="rules"
       ref="fromList"
      :hide-required-asterisk="true">
    <el-form-item prop="account">
		<div class="input-data">
   			<el-input required="" v-model="form.account" autocomplete="on"></el-input>
   			<label>手机号/邮箱</label>
		</div>
	</el-form-item>
	   <el-form-item prop="pass">
		<div class="input-data">
   			<el-input required="" v-model="form.pass" autocomplete="on"></el-input>
   			<label>密码</label>
		</div>
	</el-form-item>
<el-form>

.input-data{
  width: 100%;
  height: 40px;
  position: relative;
}
 :deep(.el-form){
   .el-form-item{
     margin-bottom: 62px;
   }
   .el-form-item__error{
     font-size: 14px;
     color: #F15151;
     line-height: 1.7;
     letter-spacing: 1px;
   }
   .el-input__inner{
     padding: 0;
     color: #FFFFFF;
     width: 100%;
     height: 40px;
     border: none;
     border-radius:0;
     border-bottom: 1px solid silver;
     font-size: 16px;
     background: transparent;
   }
   .is-required.is-error .el-input__inner{
     border:none !important;
     border-bottom:1px solid #FFFFFF !important;
   }
   
   .input-data{
  		 label{
  			font-size: 16px;
 			font-weight: normal;
 			color: #FFFFFF;
  			letter-spacing: 1px;
  			position: absolute;
  			bottom: 0;
  			left: 0;
 			pointer-events: none;
 			transition: all 0.3s ease;
		}
     .el-input:has(> input:focus) ~ label,
     .el-input:has(> input:valid) ~ label,
     //处理记住密码填充的bug
     .el-input:has(>input:-webkit-autofill) ~ label{
       transform: translateY(-30px);
       font-size: 13px ;
     }
   }
 }