输入框获取焦点与失去焦点的简单动效，效果可以参考蓝湖的登陆输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
box-sizing:border-box;
}
input:focus{
outline:none;
}
.logreg-input{
width:300px;
height:70px;
}
.logreg-input-content{
padding-top:22px;
padding-bottom:18px;
}
input[name="login-name"]{
width:100%;
height:30px;
border:none;
}
.logreg-input-line, .logreg-input-focus-line{
width:300px;
}
.logreg-input-line{
background-color:rgba(0, 0, 0, 0.4);
margin:0;
height:1px;
border:none;
left:0;
right:0;
position:absolute;
}
.logreg-input-focus-line{
background-color:#2878ff;
margin:0;
height:2px;
border:none;
position:absolute;
left:0;
right:0;
margin-top:-1px;
-webkit-transform:scaleX(0);
-ms-transform:scaleX(0);
transform:scaleX(0);
-webkit-transition:-webkit-transform .45s cubic-bezier(.23,1,.32,1);
transition:-webkit-transform .45s cubic-bezier(.23,1,.32,1);
transition:transform .45s cubic-bezier(.23,1,.32,1);
transition:transform .45s cubic-bezier(.23,1,.32,1),-webkit-transform .45s cubic-bezier(.23,1,.32,1);
}
.logreg-input-focus-line.focus {
-webkit-transform:scaleX(1);
-ms-transform:scaleX(1);
transform:scaleX(1);
}
</style>
<body>
<div class="logreg-input">
<div class="logreg-input-content">
<input class="" name="login-name">
<div>
<div class="logreg-input-line"></div>
<div class="logreg-input-focus-line"></div>
</div>
</div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
<script>
$("input[name='login-name']").focus(function () {
$(".logreg-input-focus-line").addClass("focus");
})
$("input[name='login-name']").blur(function () {
$(".logreg-input-focus-line").removeClass("focus");
})
</script>
</body>
</html>
网友评论