整活系列(二)——整一个好看的毛玻璃登陆页面

大家好，我是Ned👀，一个刚刚入门前端未满两年的大三小学生🌹

未来路还长🎉, 一起努力加油吧❤~

前言

昨天刷某站下饭的时候，看见了一个好看的登陆页面，于是昨天晚上用代码实现了一下，今天就拿出来分享给大家。

让我们先来看看效果吧：

它触动我的点就是整体的表单和按钮仿佛都是有凸起的一样，点击效果则是凹下去，配合上透明的那种毛玻璃效果就有种很棒的感觉。

啊？你说背景？我因为懒就没有去找个图片😅

来吧让我们实现一下

开始整活

整体的HTML代码:

    <form action="">
        <h1 class="title">Ned</h1>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <input type="submit" class="btn login" value="登 录" >
    </form>

为了让用户有更好的体验效果，我们将input点击后的那个默认的框框去掉。

    *{
      margin: 0;
      padding: 0;
      outline: none;
    }

至于背景的话，我是直接在body里给他设置成黑色的，这里就不放出来了(就一行..)，有小伙伴想尝试的也可以在body里引入上好看的图片~

接下来，将form表单进行水平垂直居中，还不会的小伙伴可以看看我之前写的这篇文章：水平垂直居中，我这里应用的是里面的方法五。

    form{
        background-color: rgba(255, 255, 255, 0.3);
        width: 400px;
        height: 400px;
        border-radius: 30px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

下面上重点，给表单加上毛玻璃效果以及利用border达到那种凸起的效果：

    form{
        backdrop-filter: blur(3px);
    }

    form{
        border-left: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    }

接下来是input的代码，具体什么作用跟form的是相同的，就不做解释了，如果有不同的我再解释一下。

    input{
        border: none;
        width: 80%;
        font-size: 22px;
        padding: 10px;
        margin-bottom: 32px;
        border-radius: 16px;
        background-color: transparent;
        backdrop-filter: blur(3px);
        border-left: 2px solid rgba(255, 255, 255, 0.3);
        border-top: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
        color: white;
    }

这里来说一下background-color: transparent;这个东西，它是将背景设置为透明，正常来说我们如果不去操作背景的话，默认的就是透明，可是当我们害怕因为用户对浏览器的设置会更改我们的效果的时候，我们就可以设置这个属性。

对了还有，我们上面对输入框进行了透明处理，所以里面的placeholder也是虚的，是看不清的，所以我们要在对其进行一个设置。

    ::placeholder{
      color: white;
      opacity: 0.8;
    }

没有这段代码的样子：

最后是我们对点击状态下的输入框进行一个设置，就大功告成啦！

    input:focus{
        border: none;
        background-color: rgba(255, 255, 255, 0.1);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        border-right: 2px solid rgba(255, 255, 255, 0.3);
        border-bottom: 2px solid rgba(255, 255, 255, 0.3);
        box-shadow:inset 2px 2px 2px rgba(0, 0, 0, 0.2);
    }

有心的已经注意到了，左上变成了右下，他的凸起效果就变成了凹陷了~

至于上面的文字以及按钮为什么我没分享代码呢？因为那与这个表单的重要之处没什么关系，只要你领会了form和input这里设置的精髓，我相信，其他地方你会做的更棒！

写在最后

CSS真是一门有魅力的语言，越学水越深 hhhhh~