本文正在参与「金石计划 . 分割6万现金大奖」

一个商务精约的登陆界面

前几天在逛codepen的时分，发现了一个很有意思的登陆界面，于是就想着自己完成一下，于是就有了这个demo。
趁便将接下来网站的登陆界面也改成这个款式了。

先上一个作用图：

CSS完成一个『精约高档』的输入框

在作用图里边咱们看到有两个输入框，一个为文本输入框，一个为暗码输入框。
由于两个输入框的款式大体差不多，所以咱们只讲述第一个输入框的完成。

1.输入框结构

实际上，这个输入框有两部分组成：
分别是输入框的提示内容和输输入框本体。

咱们将输入框的提示内容放进label标签中，而且给label标签增加一个for特点，值为输入框的id特点值。

这样用户在点击提示句子时，光标会自动聚集到输入框中。

    <div class="user_name">
        <label for="userName" class="userNameTip">请输入您的用户名</label>
        <input type="text" id="userName">
    </div>

到此为止，咱们输入框的结构就建立好了。

2.输入框款式

咱们先给整个大盒子增加一个相对定位，便利后续咱们对里边元素的方位调整。趁便设置一个整个盒子的巨细。

    .user_name {
        position: relative;
        width: 400px;
        height: 200px;
    }

接下来咱们就给输入框改动一个款式，究竟这样一个默认的框框真实太难看了。

    .user_name{
        width: 200px;
        height: 50px;
        position: absolute;
        top: 50px;
        left: 30px;
        font-size: 20px;
    }

这儿咱们首先给整个输入框的全体调整一个方位，然后设置一个字体巨细，这样咱们的输入框就有了一个基本的款式。

下面就开始设置输入框的款式：

#userName{
    display: inline-block;
    width: 300px;
    height: 30px;
    color: #0FF;
    font-size: 20px;
    border: 0px transparent;
    border-bottom: 2px solid #fff;
    background-color: rgb(54, 54, 54);
}

在这儿咱们设置了输入框的宽度，高度，字体色彩，字体巨细，边框，布景色彩。

由于我此刻整个大布景色彩为rgb(54, 54, 54),为了不让这个输入框这么突出没所以我设置了输入框的布景色彩与大布景色彩为相同的色彩。

但是这样还不行，由于在输入框取得焦点的时分，输入框外边还有一个边框，这样会使得输入框很丑。

经过outline特点咱们能够设置输入框取得焦点时的边框款式。
在作用图中，咱们能够看见输入框取得焦点时，输入框下边有一个蓝色的边框，这个边框的宽度为2px，色彩为#0FF。

咱们咱们这样给输入框来一个款式：

#userName:focus{
    outline: none;
    border-bottom: 2px solid #0FF;
}

这样输入框的款式就出来了：

CSS完成一个『精约高档』的输入框

3.输入框提示语

在作用图里边输入框还未取得焦点的时分，提示句子在输入框里边的，这个便是咱们使用肯定定位来完成的，调整到适宜的方位，将提示句子放在输入框里边。
而且此刻文字的色彩为白色。

.userNameTip{
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 20px;
    color: #fff;
}

最终这整个输入框的款式便是这样：

CSS完成一个『精约高档』的输入框

当然现在这是一个静态的输入框，没有任何的交互，咱们接下来就来完成这个输入框的交互。

4.输入框交互

交互肯定需求一个动画来完成，这儿咱们发现在输入框取得焦点之后，提示文字会变小，色彩也会随之改动，然后移动到输入框的上方，这个便是咱们需求完成的作用。

失掉焦点之后,咱们就会判别，这个输入框里边是否有内容：
假如有内容的话，动画就不移除，一向保持动画的结束状况；假如没有内容，就移除动画回到初识状况。

那么咱们定义一个动画：

@keyframes user {
    from{
        top: 0px;
        font-size: 20px;
    }
    to{
        top: -20px;
        font-size: 12px;
        color: #0FF;
    }
}

现在有一个问题，咱们点击输入框，最终将这个动画增加到输入框的提示句子上，那么咱们如何将动画增加上去呢？

我这儿使用的jquery中对class的操作来完成，也便是使用jQuery中的addClass()和removeClass()方法来完成。

那么在此之前，咱们就需求先将动画写进一个类里边，然后经过jQuery来操作这个类。

我这儿简略的写了一个class，然后将动画写进去：

.userNameTipA{
    animation: user 0.3s linear normal forwards;
    animation-iteration-count: 1;
}

然后咱们就能够经过jQuery来操作这个类了：

$('#userName').focus(function () {
    $('.userNameTip').addClass('userNameTipA');
    console.log("点击了");
})
$('#userName').blur(function () {
    let val = $('#userName').val();
    if (val) {
        return;
    } else {
        $('.userNameTip').removeClass('userNameTipA');
    }
});

最终点击保存，运转，就能够看到作用了。

总结

其实这个demo还是很简略的，便是使用一些定位来调整输入框的方位，然后针对输入框的聚集款式和失焦款式来完成动画，最终经过jQuery来操作这个动画。