简洁时尚的用户登录界面设计效果

这是一款简洁时尚的用户登录界面设计效果。该用户登录效果使用CSS和JS来完成，它使用元素滑动效果来制作登录表单动画，字体效果时尚大方，是非常不错的用户登录界面UI设计效果。

使用方法

HTML结构

该用户登录效果的HTML结构非常简单。

<div class="cont_principal">
  <div class="cont_join  ">
    <div class="cont_letras">
      <p>LET 'S</p>
      <p>GET</p>
      <p>LOST</p>
    </div>

    <div class="cont_form_join">
      <h2>JOIN</h2>

      <p>Nombre:</p>    
      <input type="text" class="input_text" />

      <p>Correo:</p>    
      <input type="text" class="input_text" />

      <p>Clave:</p>    
      <input type="password" class="input_text" />
    </div>
  
    <div class="cont_join_form_finish">
      <h2>Finish <i class="material-icons"></i></h2>  
    </div>

    <div class="cont_btn_join">
      <a href="#" onclick='join_1()'>JOIN</a>
    </div>
  </div>
</div>                  
                

CSS样式

整个登录界面占据视口的100%宽度和100%高度。背景图片设置为center / cover，使背景图片始终占据整个视口大小。

.cont_principal { 
  position:absolute;
  width:100%;
  height:100%;  background:url('../img/bg.jpeg')  center / cover;
}                  
                

登陆框.cont_join设置固定宽度和高度，使用绝对单位，使其局域视口居中。以及阴影效果，并且为登陆框中的元素动画设置了500毫秒的动画过渡效果。

.cont_join {
  overflow:hidden;
  position:absolute;
  width:320px;
  height:460px;
  box-shadow:1px 1px 1000px 1000px rgba(0,0,0,0.2),0px 0px 20px 4px rgba(0,0,0,0.2);
  left:50%;
  top:50%;
  margin-top:-230px;
  margin-left:-160px;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
}                 
                

鼠标滑过登陆框时，登陆框的阴影会发生动画效果。

box-shadow:1px 1px 1000px 1000px rgba(0,0,0,0.5),0px 0px 20px 4px rgba(0,0,0,0.4);                  
                

开始的时候，.cont_form_join元素的left属性被设置为-320px，因为其父元素.cont_join设置了overflow:hidden;属性，所以它是默认被隐藏的。

.cont_form_join {
  position: relative;
  width:100%;
  height:94%;
  float:left;
  left:-320px;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  bottom:0px;
 }                  
                

然后在用户点击了登录按钮之后，.cont_form_join元素的left属性被设置为0，移动回登陆框中间。

.cont_join_form_act > .cont_form_join
{
  left:0px;
}                  
                

JavaScript

该登录界面设计效果使用简单的JS代码来控制文本和登录表单元素的动画效果。主要是通过修改元素的left和bottom属性来实现动画效果。

var t = 0;

function join_1(){
if(t == 0){  document.querySelectorAll('.cont_letras > p')[0].style.left = '200px';
  document.querySelectorAll('.cont_letras > p')[1].style.left = '-320px';
  document.querySelectorAll('.cont_letras > p')[2].style.left = '200px';
setTimeout(function(){
  document.querySelector('.cont_join').className = 'cont_join cont_join_form_act';
},1000);    
t++;
          }else{
t++;            
document.querySelector('.cont_form_join').style.bottom = '-420px';
setTimeout(function(){               
  document.querySelector('.cont_join').className = 
              'cont_join cont_join_form_act cont_join_finish';
    }
   ,500);
  }                 
}