<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.container{margin: 100px;position: relative;}input{border:1px solid #999;outline: 0;width: 140px;height: 30px;line-height: 30px;border-radius: 5px;transition: text-indent .3s;text-indent: 36px;}span.title{position: absolute;left: 2px;top: 1px;height: 30px;line-height: 30px;transition: transform .3s}input:focus,input:hover{ ???text-indent: 2px;}input:focus+span.title,input:hover+span.title{ ???transform: translateX(-2.2em);}input:valid~label::after{content: "正确"}input:invalid~label::after{content: "错误"}input:valid{border:1px solid green;}input:invalid{border:1px solid red;}</style></head><body> ???<div class="container"> ???????<input type="email" id="mail" required placeholder="输入邮箱"> ???????<span class="title">邮箱</span> ???????<label for="mail"></label> ???</div></body></html>H5表单css3滑动动画
原文地址：https://www.cnblogs.com/island1994/p/9206541.html