效果图ui设计登录页面html,简洁的Material Design风格用户登录界面设计

这是一款效果非常漂亮的Material Design风格用户登录界面设计。该登录界面采用扁平风格，浮动标签等Material Design元素，使用纯CSS3来完成。

使用方法

HTML结构

该登录表单的HTML结构非常简单：采用嵌套

的HTML结构，每一个form-group是一组表单输入元素，这里使用input+label的组合，用于制作浮动标签的效果。

用户登录

用户名

密　码

忘记密码 ?

CSS样式

在CSS代码中，通过input hack技术来制作输入域聚焦是的浮动标签文字效果。

.form-group {

position: relative;

font-size: 15px;

color: #666;

}

.form-group + .form-group {

margin-top: 30px;

}

.form-group .form-label {

position: absolute;

z-index: 1;

left: 0;

top: 5px;

-webkit-transition: 0.3s;

transition: 0.3s;

}

.form-group .form-control {

width: 100%;

position: relative;

z-index: 3;

height: 35px;

background: none;

border: none;

padding: 5px 0;

-webkit-transition: 0.3s;

transition: 0.3s;

border-bottom: 1px solid #777;

}

.form-group .form-control:invalid {

outline: none;

}

.form-group .form-control:focus, .form-group .form-control:valid {

outline: none;

color: #FF4081;

box-shadow: 0 1px #FF4081;

border-color: #FF4081;

}

.form-group .form-control:focus + .form-label, .form-group .form-control:valid + .form-label {

font-size: 12px;

-ms-transform: translateY(-15px);

-webkit-transform: translateY(-15px);

transform: translateY(-15px);

}

其他代码请参看下载文件。