<body>
<div class="wrapper">
<input type="text" class="input" placeholder="邮箱">
<label class="label">邮箱</label>
</div>
</body>
.wrapper {
width: 300px;
margin: 100px auto;
position: relative;
}
.input {
display: inline-block;
width: 100%;
height: 52px;
line-height: 1.5;
font-size: 16px;
color: #3a3a3a;
padding: 8px;
border-radius: 4px;
outline: 0;
border: solid 1px #ccc;
box-sizing: border-box;
transition: all ease 0.25s;
}
.input:placeholder-shown::placeholder{
color: transparent;
}
.input:hover {
border-color: #00b7ff;
}
.input:focus {
box-shadow: #00b7ff 0 0 3px;
border-color: #00b7ff;
}
.label {
position: absolute;
left: 8px;
top: 15px;
color: #8f8f8f;
padding: 0 2px;
pointer-events: none;
background: #fff;
transition: all ease 0.25s;
}
/* 输入时 placeholder 隐藏 */
.input:not(:placeholder-shown) ~ .label,
.input:focus ~ .label {
color: #00b7ff;
transform: scale(0.8) translate(0, -33px);
}
静态图奉上，动态效果可贴代码看：
表单输入动效
网友评论