CSS3技巧31：placeholder 动画

效果如图：

 placehoder 可以做 CSS 动画？

当然不可以~！

这里只是用 label 标签去模拟 placeholder，并且添加动画。

HTML：

关键点： input 有 required 属性，即必填属性。

    

        

            
            请输入用户名
        
    

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

这个简单又好玩的效果~还不收藏~？