html5+简约登录页面,简洁时尚的CSS3用户登录界面设计

这是一款非常简洁时尚的用户登录界面设计效果。该用户登录界面使用CSS3和少量的jQuery代码来完成各种元素的动画效果。通过在登录框区域制作各种方块旋转上升的动画来达到一种非常炫酷的效果。

制作方法

HTML结构

在HTML结构中使用标准的登录表单来制作登录输入和提交按钮。各种方形的图案使用的是无序列表带一组空的

元素来制作。

Welcome

Login

CSS样式

该登录特效的CSS样式也十分简单，动画效果主要是各种方块元素的旋转上升动画。它们使用的是square动画。

.bg-bubbles {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

}

.bg-bubbles li {

position: absolute;

list-style: none;

display: block;

width: 40px;

height: 40px;

background-color: rgba(255, 255, 255, 0.15);

bottom: -160px;

-webkit-animation: square 25s infinite;

animation: square 25s infinite;

-webkit-transition-timing-function: linear;

transition-timing-function: linear;<