前端登录界面效果的制作及过程中的若干收获

最近正在学习各种前端知识，并且试着制作了个简单的登录页面，在这里将制作流程及制作时遇到的一些问题记录下来。

制作步骤

一、总体设计

制作一个页面时最好先画出一个简略的效果图，考虑好各种效果的实现方法，这样制作的效率也会提高

二、开始制作

（1）总体效果图：

总体组成比较简单，中间一个登陆表单，两侧则是类似下拉开关的按钮，并且两个按钮还会左右晃动。

点击左边的“会员”按钮：

点击右边的“游客”按钮：

 

（2）代码部分

以上这些便是主要的3个效果了。

下面是详细的代码，在所有我认为稍微难以理解的地方都配上了注释，相信大部分人都应该能看懂：

首先是html部分：

需要的引用：

body部分：

    

        

            

                
人物鉴赏
            
        
        

            

                

                    

                        
欢迎来到
                        
地狱
                        
九层
                    

                
            
            

                

                    

                        

                            
登录入口
                        
                        

                            

                                用户名
                                
                            
                            

                                密码
                                
                            
                            登录
                        
                    

                    
                    

                        
游客入口
                        登录
                    

                    

                        

                        

                        

                        

                        

                        

                         
                        请稍候
                    
                
            
        
    

    
    

        

            

            

                会员
            
        
    
    

        

            

            

                游客
            
        
    

然后是javascript：

 $(document).ready(function () {
            $(".circle").click(function () {/*点击“游客”或“会员”按钮触发动画*/
                var content = new String($(this).html().trim());

                /*使html上的各种元素变为透明，从而显示出html的黑色背景，制作出一种关灯的效果*/
                $("html").animate({ opacity: "0" }, 300, "", function () {
                    $("#cover,#admin-entry,#tourist-entry,.waiting").hide();
                    if (content == "会员") {
                        $("#admin-entry").show();
                    }
                    else {
                        $("#tourist-entry").show();
                    }
                    
                });

                /*重新使元素不透明，以显示出其上的各种元素*/
                $("html").animate({ opacity: "1" }, 300);
            });
            /*点击登录按钮，触发登录框消失的动画及等待动画*/
            $(".login-button").click(function () {
                $("#admin-entry").animate({ top: "110%" }, 500, "", function () {
                    $(".waiting").show("slow");
                });
            }); 
            $(".tourist-button").click(function () {
                $(".waiting").show("slow");
            });
        })

最后是css部分：

html{
    background-color:black;/*将html背景设置为黑色，然后各div中设置透明属性便可以方便地制作出总体的阴暗特效*/
}
html, body {
    height: 100%;/*设置高度，可以为子元素提供确切的height值*/
}
h2{/*字体设置*/
    font-family:STHupo;
    line-height:200%;
} 
body {/*背景*/
    background-image: url(../../Img/blue.jpg);
    background-size: 100% 100%;
}


.canvas {/*总体画布*/
    background: radial-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,1));/*设置径向渐变，使中心部分明亮，四周阴暗*/
    height: 100%;/*继承了body的height属性*/
}
.wellcome {/*用于欢迎界面*/
    padding:10%;
    background-color: rgba(255,255,255,0);/*这里主要是为了设置透明的背景*/
    width:100%;
    height:300px;
    overflow:hidden;/*隐藏超出部分，这里是为了“飞出”的动画效果而设置*/
}

.wellcome:after{/*添加一个伪类，这里是为了制作出鼠标移入中央欢迎部分时的高亮动画*/
    content:'';
    position:absolute;/*设置绝对定位，将其从普通流中解放出来，一来是将它与wellcome部分重合，二来使box-shadow的效果可以扩展到整个页面*/
    z-index:10;
    padding:5%;
    left:4%;
    top:0;/*这两个属性是定位*/
    display:block;
    width:92%;
    height:inherit;/*高度继承其父元素*/
    box-shadow: 1px 1px 1000px 1000px rgba(0,0,0,0.3),0px 0px 20px 4px rgba(0,0,0,0.3);/*制作阴影效果*/
    opacity:0.3;/*设置透明度。高亮动画也将围绕这个属性来做文章*/
    will-change:opacity;/*通知浏览器该属性可能会发生变化*/
    transition:all 500ms;/*动画于500ms内 完成*/
}
.wellcome:hover:after{/*当鼠标悬浮于wellcom时设置透明度为1，从而引发动画*/
    opacity:1;
}
.form{/*用于表单*/
    position:absolute;
    z-index:20;/*比wellcome:after高，以使表单元素悬浮于其上*/
}

.balloon {/*气球的容器的公共部分*/
    position: absolute;
    width: 9%;
    height: 23%;
}

.admin {/*“会员”气球*/
    left: 35%;
    top: 25%;
}
.tourist{/*“游客”气球*/
    left:62%;
    top:25%;
}
/*制作气球的来回摆动效果*/
.animation {
    animation-name: ballon-animation;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-play-state: running;
    transform-origin: 50% -276px;/*摆动原点（位于悬挂气球的线的上端）*/
    transform: rotate(5deg);/*初始变换*/
    width: 40%;
    height: 50%;
    position: absolute;
    left: 0;
    top: 30%;
    cursor:pointer;
}

    .animation:hover {/*当鼠标悬停时暂停动画*/
        animation-play-state: paused;
    }
    .animation:active {/*制作出当鼠标点击时气球略微下降的效果，以模仿下拉开关*/
        top:35%;
    }
@keyframes ballon-animation {/*动画*/
    from {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

.circle {/*气球*/
    display:block;
    width: 100%;
    height: 90%;
    border-radius: 50%;/*设置为50%，以通过width,height属性的差异制作出椭圆效果*/
    line-height: 400%;
    font-size: 2rem;
    font-weight:bolder;
    color: white;
    background-color:rgba(0,0,0,0.6); 
    overflow: hidden;/*超出部分隐藏*/
}
.rope {/*气球的吊线，制作出悬挂按钮的效果*/
    position: absolute;
    left: 50%;
    top: -310%;
    width: 0px;
    height: 310%;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
.login{/*登录界面，调整其位置*/
    padding:10px;
    font-family:KaiTi;
    position:relative;
    left:-16.7%;
}
.login-input{/*input框设置*/
    background:rgba(255,255,255,0.6);
    font-size:x-large;
}
.login-button{/*button框的设置*/
    display:inline-block;/*将a元素变为块级元素*/
    background-color:rgba(0,0,255,0.5);
    border-width:0;
    font-size:x-large;
    font-weight:bolder;
    width:100%;
}
.tourist-entry{/*游客入口框设置*/
    position:relative;
    z-index:15;
    font-size:x-large;
    line-height:400%;
    display:none;
}
.waiting{/*等待效果*/
    vertical-align:middle;/*文字与div对齐*/
    font-size:larger;
    color:black;
    font-weight:bolder;
    margin-left:30%;
    display:none;
}
/*等待效果中的那些小方框*/
.rect{
    float:left;
    width:7px;
    height:30px;
    background-color:black;
    transform:scaleY(1);
    margin-left:1px;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-name:rectangle;/*使用变换来制作等待效果，需要注意个方块的变换次序及每次变换的间隔*/
}
.rect:nth-child(2){
    animation-delay:200ms;
}
.rect:nth-child(3){
    animation-delay:400ms;
}
.rect:nth-child(4){
    animation-delay:600ms;
}
.rect:nth-child(5){
    animation-delay:800ms;
}
.rect:nth-child(6){
    animation-delay:1000ms;
}
@keyframes rectangle{/*留出50%的时间，这便是变换间隔*/
    from{
        transform:scaleY(1);
    }
    25%{
        transform:scaleY(2.5);
    }
    50%{
        transform:scaleY(1);
    }
}
#admin-entry{/*登录框（包括input和button），这里是为了制作出点击登录按钮后，登录框消失的效果*/
    position:relative;
    display:none;
}
a:link,a:hover,a:visited,a:active{/*统一链接的样式*/
    color:black;
    text-decoration:none;
}

结语：

由于我也是新手，所以在制作的过程中遇到了许多问题。

（1）关于鼠标移动到登录框后产生的高亮动画效果

这个功能是着实消耗了我的大量脑细胞，当时我是直接设置了一个box-shadow的动画效果，但却造成了严重的卡顿现象。在我查阅资料后发现，这里卡顿的原因是浏览器需要不断的重画页面而消耗了太多的资源，于是我根据网上的解决方法添加一个after伪类（当然你拿一个div来代替也未尝不可），然后为这个伪类设置box-shadow属性和opacity属性。动画效果就只要改变opacity就行了，这样一来即不会引起重画，也达到了相似的动画效果。顺便一提，关于css属性变化的大多动画都会引起页面的重画，但有两个属性例外，它们分别是opacity和tramsform。在做动画效果时可以尽量使用这两个属性，这样可以更好的动画效果，当然，一般来说普通的，类似width,height等简单的属性的动画也不会消耗太多的资源，所以对于简单的属性动画不用也可以。

（2）关于元素定位的z-index属性的理解

当时我在做登录框高亮时还遇到了另一个问题，那就是登录框上的各个元素被后来的after上的内容挡住了，以致无法填写用户名和密码。后来查阅资料后才为登录框添加了一个类“form”，并在这个类上使用了绝对定位，并设置了z-index，使它浮到了after的上方，从而解决了这个问题。

（3）关于按钮部分

刚开始我按钮部分用的是button元素，但后来发现每点击一次button都会造成整个页面的刷新，这也使得所有使用js修改过得css属性被重置为初始值，因此后面改为了a元素。