html输入框素材,CSS输入框选中效果

一款简约而不简单的输入框选中特效，提示文字会动画缩小，并移动到输入框的顶部，底部边框会有一个蓝色线条填充的动画特效，另外，登录按钮也有一个鼠标悬停的变色效果，可以直接拿来用，喜欢的就收下吧。

查看演示

下载资源：

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输入框还有底部的登录按钮，比较容易读懂，代码如下：

用户名

密码

立即登录