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

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

使用方法

HTML结构

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

LET 'S

GET

LOST

JOIN

Nombre:

Correo:

Clave:

Finish 

JOIN

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);

}

}