前端炫酷登录界面
?html內容
<!DOCTYPE html> <html lang="en" > <head><meta charset="UTF-8"><title>測試者登錄</title><style>* {margin: 0;padding: 0;outline: 0;}html, body {width: 100%;height: 100%;background:#000;overflow:hidden;}#container {width: 100%;height: 100%;}/*html {*//* height: 100%;*//*}*//*body {*//* margin:0;*//* padding:0;*//* font-family: sans-serif;*//* background: linear-gradient(#141e30, #243b55);*//*}*/.login-box {position: absolute;top: 50%;left: 50%;width: 400px;padding: 40px;transform: translate(-50%, -50%);/*background: rgb(13, 51, 77);*/box-sizing: border-box;box-shadow: 0 15px 25px rgba(0,0,0,0.6);border-radius: 10px;/*padding: 20px 30px;*/background: rgb(0,0,0,0.6);}.login-box h2 {margin: 0 0 30px;padding: 0;color: #fff;text-align: center;}.login-box .user-box {position: relative;}.login-box .user-box input {width: 100%;padding: 10px 0;font-size: 16px;color: #fff;margin-bottom: 30px;border: none;border-bottom: 1px solid #fff;outline: none;background: transparent;}.login-box .user-box label {position: absolute;top:0;left: 0;padding: 10px 0;font-size: 16px;color: #fff;pointer-events: none;transition: .5s;}.login-box .user-box input:focus ~ label,.login-box .user-box input:valid ~ label {top: -20px;left: 0;color: #03e9f4;font-size: 12px;}.login-box form a {position: relative;display: inline-block;padding: 10px 20px;color: #03e9f4;font-size: 16px;text-decoration: none;text-transform: uppercase;overflow: hidden;transition: .5s;margin-top: 40px;letter-spacing: 4px}.login-box a:hover {background: #03e9f4;color: #fff;border-radius: 5px;box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4;}.login-box a span {position: absolute;display: block;}.login-box a span:nth-child(1) {top: 0;left: -100%;width: 100%;height: 2px;background: linear-gradient(90deg, transparent, #03e9f4);animation: btn-anim1 1s linear infinite;}@keyframes btn-anim1 {0% {left: -100%;}50%,100% {left: 100%;}}.login-box a span:nth-child(2) {top: -100%;right: 0;width: 2px;height: 100%;background: linear-gradient(180deg, transparent, #03e9f4);animation: btn-anim2 1s linear infinite;animation-delay: .25s}@keyframes btn-anim2 {0% {top: -100%;}50%,100% {top: 100%;}}.login-box a span:nth-child(3) {bottom: 0;right: -100%;width: 100%;height: 2px;background: linear-gradient(270deg, transparent, #03e9f4);animation: btn-anim3 1s linear infinite;animation-delay: .5s}@keyframes btn-anim3 {0% {right: -100%;}50%,100% {right: 100%;}}.login-box a span:nth-child(4) {bottom: -100%;left: 0;width: 2px;height: 100%;background: linear-gradient(360deg, transparent, #03e9f4);animation: btn-anim4 1s linear infinite;animation-delay: .75s}@keyframes btn-anim4 {0% {bottom: -100%;}50%,100% {bottom: 100%;}}</style></head> <body> <div id="container"></div> <script src='js/three.min.js'></script> <script src='js/CopyShader.js'></script> <script src='js/EffectComposer.js'></script> <script src='js/FilmPass.js'></script> <script src='js/FilmShader.js'></script> <script src='js/ShaderPass.js'></script> <script src='js/RenderPass.js'></script> <script src="js/index.js"></script> <div class="login-box"><h2>FPA心里測試</h2><form><div class="user-box"><input type="text" name="" required=""><label>用戶名</label></div><div class="user-box"><input type="password" name="" required=""><label>密碼</label></div><a href="#"><span></span><span></span><span></span><span></span><b>開始測試</b></a></form> </div> </body> </html>JS
CopyShader.js
THREE.CopyShader = {uniforms: {"tDiffuse": { value: null },"opacity": { value: 1.0 }},vertexShader: ["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join( "\n" ),fragmentShader: ["uniform float opacity;","uniform sampler2D tDiffuse;","varying vec2 vUv;","void main() {","vec4 texel = texture2D( tDiffuse, vUv );","gl_FragColor = opacity * texel;","}"].join( "\n" )};?EffectComposer.js
THREE.EffectComposer = function ( renderer, renderTarget ) {this.renderer = renderer;if ( renderTarget === undefined ) {var parameters = {minFilter: THREE.LinearFilter,magFilter: THREE.LinearFilter,format: THREE.RGBAFormat,stencilBuffer: false};var size = renderer.getDrawingBufferSize();renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );renderTarget.texture.name = 'EffectComposer.rt1';}this.renderTarget1 = renderTarget;this.renderTarget2 = renderTarget.clone();this.renderTarget2.texture.name = 'EffectComposer.rt2';this.writeBuffer = this.renderTarget1;this.readBuffer = this.renderTarget2;this.passes = [];// dependenciesif ( THREE.CopyShader === undefined ) {console.error( 'THREE.EffectComposer relies on THREE.CopyShader' );}if ( THREE.ShaderPass === undefined ) {console.error( 'THREE.EffectComposer relies on THREE.ShaderPass' );}this.copyPass = new THREE.ShaderPass( THREE.CopyShader );};Object.assign( THREE.EffectComposer.prototype, {swapBuffers: function() {var tmp = this.readBuffer;this.readBuffer = this.writeBuffer;this.writeBuffer = tmp;},addPass: function ( pass ) {this.passes.push( pass );var size = this.renderer.getDrawingBufferSize();pass.setSize( size.width, size.height );},insertPass: function ( pass, index ) {this.passes.splice( index, 0, pass );},render: function ( delta ) {var maskActive = false;var pass, i, il = this.passes.length;for ( i = 0; i < il; i ++ ) {pass = this.passes[ i ];if ( pass.enabled === false ) continue;pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );if ( pass.needsSwap ) {if ( maskActive ) {var context = this.renderer.context;context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );context.stencilFunc( context.EQUAL, 1, 0xffffffff );}this.swapBuffers();}if ( THREE.MaskPass !== undefined ) {if ( pass instanceof THREE.MaskPass ) {maskActive = true;} else if ( pass instanceof THREE.ClearMaskPass ) {maskActive = false;}}}},reset: function ( renderTarget ) {if ( renderTarget === undefined ) {var size = this.renderer.getDrawingBufferSize();renderTarget = this.renderTarget1.clone();renderTarget.setSize( size.width, size.height );}this.renderTarget1.dispose();this.renderTarget2.dispose();this.renderTarget1 = renderTarget;this.renderTarget2 = renderTarget.clone();this.writeBuffer = this.renderTarget1;this.readBuffer = this.renderTarget2;},setSize: function ( width, height ) {this.renderTarget1.setSize( width, height );this.renderTarget2.setSize( width, height );for ( var i = 0; i < this.passes.length; i ++ ) {this.passes[i].setSize( width, height );}}} );THREE.Pass = function () {// if set to true, the pass is processed by the composerthis.enabled = true;// if set to true, the pass indicates to swap read and write buffer after renderingthis.needsSwap = true;// if set to true, the pass clears its buffer before renderingthis.clear = false;// if set to true, the result of the pass is rendered to screenthis.renderToScreen = false;};Object.assign( THREE.Pass.prototype, {setSize: function( width, height ) {},render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );}} );FilmPass.js
THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {THREE.Pass.call( this );if ( THREE.FilmShader === undefined )console.error( "THREE.FilmPass relies on THREE.FilmShader" );var shader = THREE.FilmShader;this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );this.material = new THREE.ShaderMaterial( {uniforms: this.uniforms,vertexShader: shader.vertexShader,fragmentShader: shader.fragmentShader} );if ( grayscale !== undefined ) this.uniforms.grayscale.value = grayscale;if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity;if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );this.scene = new THREE.Scene();this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );this.quad.frustumCulled = false; // Avoid getting clippedthis.scene.add( this.quad );};THREE.FilmPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {constructor: THREE.FilmPass,render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {this.uniforms[ "tDiffuse" ].value = readBuffer.texture;this.uniforms[ "time" ].value += delta;this.quad.material = this.material;if ( this.renderToScreen ) {renderer.render( this.scene, this.camera );} else {renderer.render( this.scene, this.camera, writeBuffer, this.clear );}}} );FilmShader.jd
/*** ** Film grain & scanlines shader** - ported from HLSL to WebGL / GLSL* http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html** Screen Space Static Postprocessor** Produces an analogue noise overlay similar to a film grain / TV static** Original implementation and noise algorithm* Pat 'Hawthorne' Shearon** Optimized scanlines + noise version with intensity scaling* Georg 'Leviathan' Steinrohder** This version is provided under a Creative Commons Attribution 3.0 License* http://creativecommons.org/licenses/by/3.0/*/THREE.FilmShader = {uniforms: {"tDiffuse": { value: null },"time": { value: 0.0 },"nIntensity": { value: 0.5 },"sIntensity": { value: 0.05 },"sCount": { value: 4096 },"grayscale": { value: 1 }},vertexShader: ["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join( "\n" ),fragmentShader: ["#include <common>",// control parameter"uniform float time;","uniform bool grayscale;",// noise effect intensity value (0 = no effect, 1 = full effect)"uniform float nIntensity;",// scanlines effect intensity value (0 = no effect, 1 = full effect)"uniform float sIntensity;",// scanlines effect count value (0 = no effect, 4096 = full effect)"uniform float sCount;","uniform sampler2D tDiffuse;","varying vec2 vUv;","void main() {",// sample the source"vec4 cTextureScreen = texture2D( tDiffuse, vUv );",// make some noise"float dx = rand( vUv + time );",// add noise"vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx, 0.0, 1.0 );",// get us a sine and cosine"vec2 sc = vec2( sin( vUv.y * sCount ), cos( vUv.y * sCount ) );",// add scanlines"cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * sIntensity;",// interpolate between source and result by intensity"cResult = cTextureScreen.rgb + clamp( nIntensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );",// convert to grayscale if desired"if( grayscale ) {","cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );","}","gl_FragColor = vec4( cResult, cTextureScreen.a );","}"].join( "\n" )};index.js
var container = document.getElementById("container"); var width = container.clientWidth; var height = container.clientHeight; var aspect = width / height; var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); container.appendChild(renderer.domElement);var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 1000); camera.position.z = 500system = new THREE.Group(); // planetary systemscene.add(new THREE.AmbientLight(0xFFFFFF, 0.2) );var light = new THREE.DirectionalLight(0xFFFFFF, 2.5); light.position.set(1500, 2500, 0); scene.add(light);var material = new THREE.MeshLambertMaterial({color: 0x0C2D4D });var planet = new THREE.Mesh(new THREE.IcosahedronGeometry(100, 3),material );for (var i = 0; i < planet.geometry.vertices.length; i++)planet.geometry.vertices[i].multiplyScalar(Math.random() * 0.05 + 0.95);planet.geometry.computeFlatVertexNormals(); system.add(planet);var asteroids = new THREE.Group();for (var p = 0; p < Math.PI * 2; p = p + Math.random() * 0.15) {var asteroid = new THREE.Mesh(new THREE.IcosahedronGeometry(8, 0),material);var size = Math.random() * 0.5;for (var i = 0; i < asteroid.geometry.vertices.length; i++)asteroid.geometry.vertices[i].multiplyScalar(Math.random() * 0.5 + size);rand = Math.random() * 60 - 30;asteroid.position.set(200 * Math.sin(p) + rand, rand, 200 * Math.cos(p) + rand);asteroid.geometry.computeFlatVertexNormals();asteroids.add(asteroid); }system.add(asteroids);system.rotation.x = 0.1; system.rotation.y = -.3; system.rotation.z = -0.4;scene.add(system);for (i = 0; i < 10; i++) {particles = new THREE.Points(new THREE.Geometry(),new THREE.PointsMaterial({size: Math.random() * 5}));for (j = 0; j < 20; j++) {var vertex = new THREE.Vector3();vertex.x = Math.random() * width * 1.1 - width * 1.1 / 2;vertex.y = Math.random() * height * 1.1 - height * 1.1 / 2;vertex.z = -500;particles.geometry.vertices.push(vertex);particles.material.color.setScalar(Math.random() * 0.4 + 0.2);}scene.add(particles); }function render() {requestAnimationFrame(render);planet.rotation.y += 0.001;planet.rotation.z -= 0.0005;asteroids.rotation.y += 0.003;renderer.render(scene, camera); }render();RenderPass.js
THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {THREE.Pass.call( this );this.scene = scene;this.camera = camera;this.overrideMaterial = overrideMaterial;this.clearColor = clearColor;this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;this.clear = true;this.clearDepth = false;this.needsSwap = false;};THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {constructor: THREE.RenderPass,render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {var oldAutoClear = renderer.autoClear;renderer.autoClear = false;this.scene.overrideMaterial = this.overrideMaterial;var oldClearColor, oldClearAlpha;if ( this.clearColor ) {oldClearColor = renderer.getClearColor().getHex();oldClearAlpha = renderer.getClearAlpha();renderer.setClearColor( this.clearColor, this.clearAlpha );}if ( this.clearDepth ) {renderer.clearDepth();}renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );if ( this.clearColor ) {renderer.setClearColor( oldClearColor, oldClearAlpha );}this.scene.overrideMaterial = null;renderer.autoClear = oldAutoClear;}} );ShaderPass.js
THREE.ShaderPass = function ( shader, textureID ) {THREE.Pass.call( this );this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";if ( shader instanceof THREE.ShaderMaterial ) {this.uniforms = shader.uniforms;this.material = shader;} else if ( shader ) {this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );this.material = new THREE.ShaderMaterial( {defines: shader.defines || {},uniforms: this.uniforms,vertexShader: shader.vertexShader,fragmentShader: shader.fragmentShader} );}this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );this.scene = new THREE.Scene();this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );this.quad.frustumCulled = false; // Avoid getting clippedthis.scene.add( this.quad );};THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {constructor: THREE.ShaderPass,render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {if ( this.uniforms[ this.textureID ] ) {this.uniforms[ this.textureID ].value = readBuffer.texture;}this.quad.material = this.material;if ( this.renderToScreen ) {renderer.render( this.scene, this.camera );} else {renderer.render( this.scene, this.camera, writeBuffer, this.clear );}}} );three.min.js
總結
- 上一篇： 扩充antd的Icon图标库
- 下一篇： 前端工程师等级评定