一款简约而不简单的输入框选中特效，提示文字会动画缩小，并移动到输入框的顶部，底部边框会有一个蓝色线条填充的动画特效，另外，登录按钮也有一个鼠标悬停的变色效果，可以直接拿来用，喜欢的就收下吧。
查看演示
下载资源：
12
次 下载资源
下载积分：
20
积分
页面的head部分需要设置好CSS样式，由于难度不大，以下直接提供代码： body {
font-size: 20px;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
background: #fff;
}
form {
width: 300px;
margin: 20px auto;
}
fieldset {
position: relative;
border: none;
}
label {
position: absolute;
top: 18px;
margin-left: 15px;
color: rgba(0, 0, 0, 0.3);
transform-origin: left;
transition: all 0.3s ease;
}
input:focus ~ label {
color: #26c7fc;
}
input:focus ~ label,
input:valid ~ label {
top: 0;
transform: scale(0.6, 0.6);
}
input {
font-size: 20px;
width: 100%;
border: none;
margin-top: 10px;
padding: 5px 15px;
}
input:focus {
outline: none;
}
.after {
width: 100%;
height: 2px;
background: linear-gradient(to right, #26c7fc 50%, transparent 50%);
background-color: rgba(0, 0, 0, 0.3);
background-size: 200% 100%;
background-position: 100% 0;
transition: all 0.6s ease;
}
input:focus ~ .after {
background-position: 0 0;
}
button {
position: relative;
width: 100%;
font-size: 20px;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
line-height: 2;
margin-top: 20px;
padding: 3px 10px;
color: rgba(0, 0, 0, 0.4);
background: white;
border: none;
background: linear-gradient(to right, #26c7fc 50%, transparent 50%);
background-color: rgba(0, 0, 0, 0.3);
background-size: 200% 100%;
background-position: 100% 0;
transition: all 0.6s ease;
border-radius: 5px;
}
button:before {
position: absolute;
content: "立即登录";
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
display: block;
background-color: white;
border-radius: 3px;
}
button:active,
button:focus,
button:hover {
outline: none;
background-position: 0 0;
color: #26c7fc;
}
页面的body部分用三个fieldset，分别放置不同用处的input输入框还有底部的登录按钮，比较容易读懂，代码如下：
用户名
密码
立即登录
