div css 会员登录表单,html5 css3谷歌会员登录表单界面特效

特效描述：html5 css3 谷歌会员登录 表单界面特效，html5 css3登录表单界面，谷歌会员登录界面

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

会员登录

邮箱

邮箱不能为空

密码

密码不能为空

记住密码

登录

$(document).ready(function () {

$(function () {

var animationLibrary = 'animate';

$.easing.easeOutQuart = function (x, t, b, c, d) {

return -c * ((t = t / d - 1) * t * t * t - 1) + b;

};

$('[ripple]:not([disabled],.disabled)').on('mousedown', function (e) {

var button = $(this);

var touch = $('');

var size = button.outerWidth() * 1.8;

var complete = false;

$(document).on('mouseup', function () {

var a = { 'opacity': '0' };

if (complete === true) {

size = size * 1.33;

$.extend(a, {

'height': size + 'px',

'width': size + 'px',

'margin-top': -size / 2 + 'px',

'margin-left': -size / 2 + 'px'

});

}

touch[animationLibrary](a, {

duration: 500,

complete: function () {

touch.remove();

},

easing: 'swing'

});

});

touch.addClass('touch').css({

'position': 'absolute',

'top': e.pageY - button.offset().top + 'px',

'left': e.pageX - button.offset().left + 'px',

'width': '0',

'height': '0'

});

button.get(0).appendChild(touch.get(0));

touch[animationLibrary]({

'height': size + 'px',

'width': size + 'px',

'margin-top': -size / 2 + 'px',

'margin-left': -size / 2 + 'px'

}, {

queue: false,

duration: 500,

'easing': 'easeOutQuart',

'complete': function () {

complete = true;

}

});

});

});

var username = $('#username'), password = $('#password'), erroru = $('erroru'), errorp = $('errorp'), submit = $('#submit'), udiv = $('#u'), pdiv = $('#p');

username.blur(function () {

if (username.val() == '') {

udiv.attr('errr', '');

} else {

udiv.removeAttr('errr');

}

});

password.blur(function () {

if (password.val() == '') {

pdiv.attr('errr', '');

} else {

pdiv.removeAttr('errr');

}

});

submit.on('click', function (event) {

event.preventDefault();

if (username.val() == '') {

udiv.attr('errr', '');

} else {

udiv.removeAttr('errr');

}

if (password.val() == '') {

pdiv.attr('errr', '');

} else {

pdiv.removeAttr('errr');

}

});

});