4-7动画
来源：4-7 valid和invalid伪类美化表单案例
soso_crazy
2019-02-09 16:14:32
input{
border: 1px solid #999;
outline:0;
width:140px;
height:30px;
line-height:30px;text-indent:36px;transition: all .3s; /*缩进36px transition: all .3s;动画*/
border-radius:5px;
}
span.title{
position:absolute;
line-height:30px;
height: 30px;
left:2px;
top:2px;
transition:all .3s;
}
input:focus,input:hover{
text-indent:2px;
}
input:focus+span.title,input:hover+span.title{
transform:translateX(-120%) /*向X轴移动-120%*/
}
1.既然已经设置了text-indent为36px,是输入邮箱这几个文字移除输入框，span.title滑动是靠left和top值吗？为什么没有设置focus和hover也要加动画transition？
input:focus,input:hover{
text-indent:2px;
}
2.text-indent:2px;有什么作用？
3.
input:focus+span.title,input:hover+span.title{
transform:translateX(-120%) /*向X轴移动-120%*/
}
这个才是移出输入框的效果吗？
1回答
-
好帮手慕星星
2019-02-11
你好，
1、input元素在不添加text-indent为36px的情况下，显示如下：
‘输入邮箱’在开始的位置，会被定位的‘邮箱’遮盖住，所以设置文本缩进显示在‘邮箱’的后面：
2、title的滑动是设置了transform的原因：
在水平方向进行移动，设置负值是左侧方向。
3、关于动画的问题：
4、鼠标移入的时候设置文本缩进为2px，是为了让内容跟着标题一起滑动，紧跟在后面：
否则不设置就是这种效果：
5、
自己可以再测试理解下，祝学习愉快！
0
相似问题