HTML5+CSS3小实例：有点小酷的input输入框动画

HTML5+CSS3实现有点小酷的input输入框动画，带动画的输入框，总是让人忍不住去点它。

先看效果：

源代码：

        

            
            

            您的姓名
        
    

*{
    margin: 0;
    padding: 0;
    outline: none;
    /* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */
    box-sizing: border-box;
}
body{
    /* 弹性布局 水平垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 设置body最小高度为100%窗口高度 */
    min-height: 100vh;
    /* 渐变背景 */
    background: linear-gradient(200deg,#0c3483,#a2b6df);
}
.wrapper{
    width: 450px;
    background-color: #fff;
    /* 内边距（上下左右） */
    padding: 40px;
    /* 盒子阴影 */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.wrapper .input-data{
    /* 相对定位 */
    position:relative;
    width: 100%;
    height: 40px;
}
.wrapper .input-data input{
    width: 100%;
    height: 100%;
    border:none;
    font-size: 17px;
    border-bottom: 2px solid #c0c0c0;
}
/* 输入框获得焦点时 */
.wrapper .input-data input:focus ~ label,
/* 输入框的值为合法时 */
.wrapper .input-data input:valid ~ label{
    /* label上移，同时改变字号、颜色 */
    transform: translateY(-25px);
    font-size: 15px;
    color: #2c6fdb;
}
.wrapper .input-data label{
    position: absolute;
    bottom:10px;
    left: 0px;
    color: #808080;
    /* 点击label可以穿透到输入框 */
    pointer-events: none;
    /* 给动画添加过渡，不会太过生硬 */
    transition: all 0.3s ease;
}
.wrapper .input-data .underline{
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background-color: #2c6fdb;
    /* 沿X轴放大 */
    transform: scaleX(0);
    /* 动画过渡 */
    transition: all 0.3s ease;
}
.wrapper .input-data input:focus ~ .underline,
.wrapper .input-data input:valid ~ .underline{
    /* 沿X轴缩小 */
    transform: scaleX(1);
}