效果如图:
placehoder 可以做 CSS 动画?
当然不可以~!
这里只是用 label 标签去模拟 placeholder,并且添加动画。
HTML:
关键点: input 有 required 属性,即必填属性。
<div class="box">
<form action="#">
<div class="inputDiv">
<input class="input" type="text" required>
<label>请输入用户名</label>
</div>
</form>
</div>
CSS:
*{
margin: 0;
padding: 0;
}
input{
outline: none;
}
.box{
width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
border:1px #666 solid;
padding: 50px;
}
.inputDiv{
position: relative;
height: 42px;
}
.inputDiv .input{
height: 40px;
border:1px #666 solid;
padding-left: 20px;
padding-right: 20px;
}
.inputDiv .input:focus {
border:1px #f30 solid;
}
.inputDiv .input:valid ~ label,
.inputDiv .input:focus ~ label{
top:-42px;
left:0;
color: #f30;
}
.inputDiv label{
position: absolute;
left:20px;
line-height: 40px;
top:1px;
transition: all 0.3s;
pointer-events: none; /* 不接受点击 */
}
关键点:
1. 利用 label 模拟 placeholder,执行动画。因此,label 需要绝对定位。框架 div.inputDiv 需要相对定位。
2. input 聚焦的时候,label 标签执行动画。因此需要 .inputDiv .input:focus ~ label 样式。即,当 input 聚焦的时候,它后面的 label 标签修改样式。
3. 当 input 有内容的时候,label 要保持在input 外面。因此,符合 required 属性时,需要修改 label 的样式。 .inputDiv .input:valid ~ label
这个简单又好玩的效果~还不收藏~?