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

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();

特效二

机械蜂巢演示

蓝盒子 canvas { position: absolute; top: 0; left: 0; }

特效三

万花筒演示

蓝盒子 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%); }

特效四

电流

蓝盒子 body { background: #000; overflow: hidden; } canvas { display: block; }

特效五

彩线

蓝盒子 html, body { background: #000; margin: 0; padding:0;} canvas { width: 100%; height: 100%; position: absolute; }

特效六

蓝盒子 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; }

特效七

蓝盒子 body { margin: 0; overflow: hidden; background: #000; } body canvas { -webkit-filter: url("#turbulence"); filter: url("#turbulence"); }

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

分享一些前端面试题以及学习路线给大家

开源分享：docs.qq.com/doc/DSmRnRG…