<! DOCTYPE html>
<meta charset= "Utf-8" >
<body >
<div id= "Header" >
<form class= "Form" >
<input type= "text" class= "Input_key" maxlength= "autocomplete=" "Off" >
</form>
</div>
<script src= "Js/jquery-1.11.3.js" ></script>
<script>
(function () {
function P () {
Window.requestanimframe (p), a = d (0,), 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 = $ (' <canvas width= "' + E + '" height= "' + t + '"/> '). AppendTo (n). css ({
Position: "Absolute",
Left:-20,
Top:-44,
zindex:999,
Pointerevents: "None"
}), S = I[0].getcontext ("2d"), R = $ ("<div/>"). AppendTo (n). css ({
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 =., r.gravity = 1, R . Hue = d (a-10, A + ten), r.brightness = d ((), R.alpha = 1, R.decay = d (.,.), 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.al PHA-= 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 >= && (s = 500);
var a = f;
while (a--) U.push (new H (S + N, g, O));
T.css ({
"-webkit-transform": "Translate ( -1px, 1px)",
"-moz-transform": "Translate ( -1px, 1px)",
"-o-transform": "Translate ( -1px, 1px)",
Transform: "Translate ( -1px, 1px)"
}), SetTimeout (function () {
T.css ({
"-webkit-transform": "None",
"-moz-transform": "None",
"-o-transform": "None",
Transform: "None"
})
}, 10)
})
})();
</script>
</body>
Good search input box "dynamic light wave" effect "input word when the fireworks" on the tall
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
