一款简约而不简单的输入框选中特效,提示文字会动画缩小,并移动到输入框的顶部,底部边框会有一个蓝色线条填充的动画特效,另外,登录按钮也有一个鼠标悬停的变色效果,可以直接拿来用,喜欢的就收下吧。
页面的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输入框还有底部的登录按钮,比较容易读懂,代码如下:
<fieldset>
<input id="uname" type="text" name="uname" required>
<label for="uname">用户名</label>
<div class="after"></div>
</fieldset>
<fieldset>
<input id="upswd" type="text" name="upswd" required>
<label for="upswd">密码</label>
<div class="after"></div>
</fieldset>
<fieldset>
<button>立即登录</button>
</fieldset>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791