Welcome 您好!

    

css-输入框聚焦效果

666.gif


html

<div class="panel-lite">
<div class="form-group">
    <input required="required" class="form-control">
    <label class="form-label">输入手机号</label>
</div>
<div class="form-group">
    <input type="password" required="required" class="form-control">
    <label class="form-label">输入验证码</label>
</div>
<div class="form-group">
    <input type="password" required="required" class="form-control">
    <label class="form-label">输入新消费密码</label>
</div>
<div class="form-group">
    <input type="password" required="required" class="form-control">
    <label class="form-label">确认新密码</label>
</div>
</div>

css

<style>
*,*:after,*:before {
box-sizing:border-box;
}
.panel-lite {
margin:20px auto;
max-width:360px;
background:#fff;
padding:45px 20px;
border-radius:4px;
box-shadow:2px 2px 5px rgba(0,0,0,0.2);
position:relative;
}
.panel-lite h4 {
font-weight:400;
font-size:24px;
text-align:center;
color:#FF4081;
margin:15px auto;
}
.panel-lite a {
display:inline-block;
margin-top:25px;
text-decoration:none;
color:#FF4081;
font-size:14px;
}
.form-group {
position:relative;
font-size:15px;
color:#666;
}
.form-group + .form-group {
margin-top:30px;
}
.form-group .form-label {
position:absolute;
z-index:1;
left:0;
top:5px;
-webkit-transition:0.3s;
transition:0.3s;
}
.form-group .form-control {
width:100%;
position:relative;
z-index:3;
height:35px;
background:none;
border:none;
padding:5px 0;
-webkit-transition:0.3s;
transition:0.3s;
border-bottom:1px solid #777;
}
.form-group .form-control:invalid {
outline:none;
}
.form-group .form-control:focus,.form-group .form-control:valid {
outline:none;
color:#3bcf68;
box-shadow:0 1px #3bcf68;
border-color:#3bcf68;
}
.form-group .form-control:focus + .form-label,.form-group .form-control:valid + .form-label {
font-size:12px;
-ms-transform:translateY(-15px);
-webkit-transform:translateY(-15px);
transform:translateY(-15px);
}
</style>

亿七Seven

添加新评论

只有脚踏实地的人,才能够说:路,就在我的脚下。

无论你选择做什么,追求完美的程度决定你成就的高度。

这个世界最脆弱的是生命,身体健康,很重要。

上帝说:你要什么便取什么,但是要付出相当的代价。

现在站在什么地方不重要,重要的是你往什么方向移动。