<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>运营系统登录页</title><link href="static/css/login.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="static/lib/jquery/1.9.1/jquery.min.js"></script><script src="static/js/verificationNumbers.js" tppabs="static/js/verificationNumbers.js"></script><style>.J_codeimg{z-index:-1;position:absolute;}</style><script>
$(document).ready(function(){//验证码createCode();});</script></head><body><div class="login-box" id="demo"></div><div class="canvaszz"></div><canvas id="canvas"></canvas></div><script>//宇宙特效"use strict";var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue =217,
stars =[],
count =0,
maxStars =2500;//星星数量var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width =100;
canvas2.height =100;var half = canvas2.width /2,
gradient2 = ctx2.createRadialGradient(half, half,0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ',61%,33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ',64%,6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half,0, Math.PI *2);
ctx2.fill();![请添加图片描述](https://img-blog.csdnimg.cn/f7c720e91ff947a9a01febb855cfcc52.png)// End cachefunctionrandom(min, max){if(arguments.length <2){
max = min;
min =0;}if(min > max){var hold = max;
max = min;
min = hold;}return Math.floor(Math.random()*(max - min +1))+ min;}functionmaxOrbit(x, y){var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));return diameter /2;//星星移动范围,值越大范围越小,}var Star =function(){this.orbitRadius =random(maxOrbit(w, h));this.radius =random(60,this.orbitRadius)/18;//星星大小this.orbitX = w /2;this.orbitY = h /2;this.timePassed =random(0, maxStars);this.speed =random(this.orbitRadius)/500000;//星星移动速度this.alpha =random(2,10)/10;
count++;
stars[count]=this;}
Star.prototype.draw =function(){var x = Math.sin(this.timePassed)*this.orbitRadius +this.orbitX,
y = Math.cos(this.timePassed)*this.orbitRadius +this.orbitY,
twinkle =random(10);if(twinkle ===1&&this.alpha >0){this.alpha -=0.05;}elseif(twinkle ===2&&this.alpha <1){this.alpha +=0.05;}
ctx.globalAlpha =this.alpha;
ctx.drawImage(canvas2, x -this.radius /2, y -this.radius /2,this.radius,this.radius);this.timePassed +=this.speed;}for(var i =0; i < maxStars; i++){newStar();}functionanimation(){
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha =0.5;//尾巴
ctx.fillStyle = 'hsla(' + hue + ',64%,6%,2)';
ctx.fillRect(0,0, w, h)
ctx.globalCompositeOperation = 'lighter';for(var i =1, l = stars.length; i < l; i++){
stars[i].draw();};
window.requestAnimationFrame(animation);}animation();</script></body></html>
第二个:点击出现文字特效
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script>(function (){var a_idx =0;
window.onclick = function (event){var a =newArray("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");var heart = document.createElement("b");//创建b元素
heart.onselectstart =newFunction('event.returnValue=false');//防止拖动
document.body.appendChild(heart).innerHTML = a[a_idx];//将b元素添加到页面上
a_idx =(a_idx +1)% a.length;
heart.style.cssText ="position: fixed;left:-100%;";//给p元素设置样式var f =16,// 字体大小
x =event.clientX - f /2,// 横坐标
y =event.clientY - f,// 纵坐标
c =randomColor(),// 随机颜色
a =1,// 透明度
s =1.2;// 放大缩小var timer =setInterval(function (){//添加定时器if(a <=0){
document.body.removeChild(heart);clearInterval(timer);}else{
heart.style.cssText ="font-size:16px;cursor: default;position: fixed;color:"+
c +";left:"+ x +"px;top:"+ y +"px;opacity:"+ a +";transform:scale("+
s +");";
y--;
a -=0.016;
s +=0.002;}},15)}// 随机颜色functionrandomColor(){return"rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math
.random()*255))+")";}}());</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><script type="text/javascript">!function (){functionn(n, e, t){return n.getAttribute(e)|| t
}functione(n){return document.getElementsByTagName(n)}functiont(){var t =e("script"), o = t.length, i = t[o -1];return{l: o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}functiono(){
a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}functioni(){
r.clearRect(0,0, a, c);var n, e, t, o, m, l;
s.forEach(function (i, x){for(i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x <0?-1:1, i.ya *= i.y > c || i.y <0?-1:1, r.fillRect(i.x -.5, i.y -.5,1,1), e = x +1; e < u.length; e++) n = u[e],null!== n.x &&null!== n.y &&(o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max &&(n === y && l >= n.max /2&&(i.x -=.03* o, i.y -=.03* m), t =(n.max - l)/ n.max, r.beginPath(), r.lineWidth = t /2, r.strokeStyle ="rgba("+ d.c +","+(t +.2)+")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))}),x(i)}var a, c, u, m = document.createElement("canvas"), d =t(), l ="c_n"+ d.l, r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (n){
window.setTimeout(n,1e3/45)}, w = Math.random, y ={x:null,y:null,max:2e4};
m.id = l, m.style.cssText ="position:fixed;top:0;left:0;z-index:"+ d.z +";opacity:"+ d.o,e("body")[0].appendChild(m),o(), window.onresize = o, window.onmousemove = function (n){
n = n || window.event, y.x = n.clientX, y.y = n.clientY
}, window.onmouseout = function (){
y.x =null, y.y =null};for(var s =[], f =0; d.n > f; f++){var h =w()* a, g =w()* c, v =2*w()-1, p =2*w()-1;
s.push({x: h,y: g,xa: v,ya: p,max:6e3})}
u = s.concat([y]),setTimeout(function (){i()},100)}();</script></body></html>