为什么我这一打开，是邮箱正确的？我看老师还有有些同学打开，是邮箱错误

来源：4-10 编程练习

大师兄js

2020-05-12 17:27:01

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input动画效果</title>
<style>
.container {
margin: 300px;
position: relative;
}

input {
border: 1px solid red;
outline: none;
width: 140px;
height: 30px;
line-height: 30px;
text-indent: 36px;
transition: all .3s;
border-radius: 5px;
}

span.title{
position:absolute;
top: 2px;
left: 2px;
line-height: 30px;
transition: all .3s;
}

input:focus,input:hover{
text-indent: 2px;
}
input:focus+span.title,input:hover+span.title{
transform: translateX(-120%);
}
input:valid~label::after{
content: "你邮箱正确";
}
input:invalid~label::after{
content: "你邮箱错误";
}

</style>
</head>
<body>
<div class="container">
<input type="email" placeholder="输入邮箱" id="mail">
<span class="title">邮箱</span>
<label for="mail"></label>
</div>
</body>
</html>