输入框获取焦点与失去焦点的简单动效，效果可以参考蓝湖的登陆输入框
<!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>
