我目前只模仿了一种,后期右的话还会继续加进来的。
- 有动画效果的,截屏看不出来
HTML:
<div class="input-group">
<input class="input__field" type="text" id="input-1" onblur="inputBlur(this)"/>
<label class="input__label" for="input-1">
<span class="input__label-content input__label-content--nao">载波(MHz)</span>
</label>
</div>
CSS:
.input-group{
width: 43%;
display: inline-block;
margin: 20px 40px 0 0;
position: relative;
height: 50px;
padding-top: 16px;
}
.input__field {
width: 100%;
position: relative;
display: block;
border: none;
border-bottom: 2px solid #9da8b2;
border-radius: 0;
padding: 0.5em 0em 0.25em;
background: transparent;
color: #9da8b2;
font-size: 1.25em;
font-weight: 400;
font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-appearance: none;
}
.input__field:focus,
.imitationSelect:focus,
.btn-calculate:focus{
outline: none;
}
.input__label {
display: block;
width: 100%;
color: #797979;
font-size: 1.2rem;
position: absolute;
top: 0;
left: 0;
text-align: left;
pointer-events: none;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform 0.2s 0.15s, color 1s;
transition: transform 0.2s 0.15s, color 1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.input__label-content {
position: relative;
display: block;
padding: 1.6em 0;
width: 100%;
}
.input__field:focus + .input__label{
color: #252525;
-webkit-transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
}
.has-value{
transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
}
JS:
function inputBlur(e) {
if ($(e).val() === "") {
$(e).parent().removeClass("input--field");
$(e).next().removeClass("has-value");
} else {
console.log($(e).val());
$(e).next().addClass("has-value");
}
}