这次给大家带来js怎么给输入框增加动画效果，js给输入框增加动画效果的注意事项有哪些，下面就是实战案例，一起来看一下。

(function() {

function p() {

window.requestAnimFrame(p), a = d(0, 360), s.globalCompositeOperation = "destination-out", s.fillStyle = "rgba(0, 0, 0, 0.5)", s.fillRect(0, 0, e, t), s.globalCompositeOperation = "source-over";

var n = u.length;

while (n--) u[n].draw(), u[n].update(n)

}

function d(e, t) {

return Math.random() * (t - e) + e

}

function v() {

i = $('').appendTo(n).css({

position: "absolute",

left: -20,

top: -44,

zIndex: 999,

pointerEvents: "none"

}), s = i[0].getContext("2d"), r = $("

fontSize: "16px",

fontFamily: "arial",

height: 1,

position: "absolute",

left: 15,

top: 50,

zIndex: 0,

visibility: "hidden",

whiteSpace: "nowrap"

})

}

if (/msie/i.test(navigator.userAgent)) return;

var e = 600,

t = 100,

n = $("#header .form"),

r = null,

i = null,

s = null,

o = !1,

u = [],

a = 120,

f = 8,

l = 0,

c = 0,

h = function(e, t, n) {

var r = this;

r.x = e, r.y = t, r.dir = n, r.coord = {}, r.angle = d(0, -Math.PI), r.speed = d(2, 8), r.friction = .95, r.gravity = 1, r.hue = d(a - 10, a + 10), r.brightness = d(50, 80), r.alpha = 1, r.decay = d(.03, .05), r.init()

};

h.prototype = {

init: function() {

var e = this;

e.coord = {

x: e.x,

y: e.y

}

},

update: function(e) {

var t = this;

t.coord = {

x: t.x,

y: t.y

}, t.speed *= t.friction, t.x += Math.cos(t.angle) * t.speed + t.dir, t.y += Math.sin(t.angle) * t.speed + t.gravity, t.alpha -= t.decay, t.alpha <= t.decay && u.splice(e, 1)

},

draw: function() {

var e = this;

s.fillStyle = "hsla(" + e.hue + ", 100%, " + e.brightness + "%, " + e.alpha + ")", s.beginPath(), s.arc(e.coord.x, e.coord.y, 2, 0, 2 * Math.PI, !0), s.closePath(), s.fill()

}

}, window.requestAnimFrame = function() {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function(e) {

window.setTimeout(e, 1e3 / 60)

}

}(), $(".input_key").on("focus", function() {

o || (v(), o = !0, p());

var e = $(this.form),

t = -20,

n = -44;

i.appendTo(e), e.attr("name") == "f3" && ($("body").hasClass("layout1") ? t = 97 : t = -20), i.css({

left: t,

top: n

})

}).on("keydown", function(e) {

var t = $(this.form);

if (!(this.selectionStart >= 0 && r)) return;

var n = this.selectionStart,

i = this.value.substring(0, n).replace(/ /g, " "),

s = r.html(i).width(),

o = 0;

i.length > c ? o = -2 : o = 2, c = i.length, s >= 500 && (s = 500);

var a = f;

while (a--) u.push(new h(s + 50, 60, o));

// 这里是控制输入框都抖动的

t.css({

"-webkit-transform": "translate(-1px, 1px)",

"-moz-transform": "translate(-1px, 1px)",

"-MS-transform": "translate(-1px, 1px)",

"-o-transform": "translate(-1px, 1px)",

transform: "translate(-1px, 1px)"

}),

setTimeout(function() {

t.css({

"-webkit-transform": "none",

"-moz-transform": "none",

"-MS-transform": "none",

"-o-transform": "none",

transform: "none"

})

}, 10)

})

})();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：