老师，有几个地方不太明白
来源：4-10 编程练习
小慕修行中
2018-04-30 11:07:01
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.container{
margin:100px;position:relative;
}
input{
border:1px solid #999;outline:0;width:140px;height:30px;line-height:30px;text-indent:36px;transition:2px .3s;border-radius:5px;
}
span.title{
position:absolute;line-height:30px;height:30px;left:2px;top:2px;transition:all 0.3s;
}
/*鼠标移上去或者获得焦点、在此处填写代码*/
input:focus,input:hover{
text-indent:2px;
}
input:focus+span.title,input:hover+span.title{
transform:translatex(-120%);
}
/*符合验证的label、在此处填写代码*/
input:valid~label::after{
content:"你输入的邮箱正确！";
}
input:vaild{
border:1px solid green;
}
/*不符合验证的label、在此处填写代码*/
input:invalid~label::after{
content:"你输入错误！";
}
input:invalid{
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">
<input type="email" required id="mail" placeholder="请输入邮箱地址">
<span class="title">邮箱</span>
<label for="mail"></label>
</div>
</body>
</html>
transition:all .3s什么意思呢？如何判断text-indent缩进多少px?transform:transition(-120%)是什么意思？
1回答
-
丶四夕
2018-04-30
transition是css3中过度属性，在css3课程中会讲到，老师这样写的意思是让该元素的所有变化的过程持续0.3s，默认是瞬间就执行了，text-indent缩进多少这个无法一次性准确判断的，可以利用控制台进行调试到准确为止。最后transform也是css3中的变换属性，应该是translateX（-120%）吧，表示向左平移宽度的120%。0
相似问题