html密码错误时 错误提示框提示,炫酷密码输入框错误消息提示特效

这是一款炫酷密码输入框错误消息提示特效。该特效在用户输入密码错误的时候，慢慢看有抖动动画，并且页面会以红色显示。

使用方法

在页面中引入base.css和demo.css样式文件，以及jquery和TweenMax.min.js文件。

HTML结构

页面的HTML结构如下。

Password

JavaScript

最后在页面DOM元素加载完毕之后，通过下面的js来初始化该特效。

$(function() {

$('.password-holder .unlock').click(function(e) {

var errorMessage = $('.error-message');

var passwordDiv = $(this).parent();

if(passwordDiv.children('input').val()) {

var tl = new TimelineMax();

tl.fromTo(passwordDiv, 0.3, {x:-1}, { x:1, ease:RoughEase.ease.config({ strength:8, points:40, template:Linear.easeNone, randomize:false }) , clearProps:"x" })

.to($('body'), 0.15, { backgroundColor: '#E74C3C' })

.to(errorMessage, 0.15, { autoAlpha: 1, y: -16 }, "-=0.15")

.to(passwordDiv, 0.15, { className: "+=false" }, "-=0.15")

.to(passwordDiv, 0.15, { className: "-=false" }, "+=2.5")

.to($('body'), 0.15, { backgroundColor: '#EDF0F9' }, "+=0.65")

.to(errorMessage, 0.15, { autoAlpha: 0, y: 0 }, "-=0.15");

}

})

});