分享一下前几个月我做的超炫的登录页面

电玩女神 2023-09-24 14:37 15阅读 0赞

## 先给大家看看登录页面的效果演示 ##

![在这里插入图片描述][844519db4f634d0ca6265e611061ba4c.gif]

## 这个登录页面分为三个部分（页面切换：连续按五次V，大小写都可以） ##

### 第一个（最初的鱼儿游动页面） ###

![在这里插入图片描述][e2fa0d0ea7264d5b92fab3f547ec9ec4.png]

#### 登录、切换页面、和鱼儿游动这个页面的代码就不放在这里了，这个虽然是我借鉴他人的，但到处有bug，当时耗费了我几天时间来修正、整理，太难做了，如果需要的话，可以三连后，后台联系我 ####

### 第二个（人山人海页面） ###

![在这里插入图片描述][4c2c05f717c94b4e94815a4ddddc7238.png]

### 具体代码如下：都是完整的代码，有什么问题可以评论区留言，我看到之后会回复 ###

#### html： ####

<!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>HTML5 Canvas人群流动模拟动画DEMO演示</title>
      <link rel="stylesheet" href="login2/style.css">
    </head>
    <body>
    	<div class="container">
    		<canvas id="canvas"></canvas>
    	</div>
    	<script src="login2/gsap.min.js"></script>
    	<script  src="login2/script.js"></script>
    	<style>
    		*{
          
    			margin : 0;
    			padding : 0;
    		}
    		.container{
          
    			z-index: 1;
    			position : absolute;
    			width:100%;
    			height:99.6%;
    		}
    	</style>
    </body>
    </html>

#### style.css: ####

html, body {
        
      height: 100%;
    }
    body {
        
      margin: 0;
    }
    
    #canvas {
        
      width: 100%;
      height: 100%;
    }

#### gsap.min.js:[GSAP.MIN.JS: DOWNLOAD - CDNPKG][GSAP.MIN.JS_ DOWNLOAD - CDNPKG] ####

这不是我小气，不给你们源文件，是因为这个就算是压缩的js文件，一万多个词，而且我已经复制下来了，但csdn说我文字太长了，要分文章发，所以我就把代码删了，把下载地址发你们了
    如果打不开，额....，那你们就在网上搜一搜，如果懒得找，也可以后台找我

#### script.js: ####

console.clear();
    console.log('lsakdfalskjdflnksd');
    
    const config = {
        
      src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/open-peeps-sheet.png',
      rows: 15,
      cols: 7 };
    
    
    // UTILS
    
    const randomRange = (min, max) => min + Math.random() * (max - min);
    
    const randomIndex = array => randomRange(0, array.length) | 0;
    
    const removeFromArray = (array, i) => array.splice(i, 1)[0];
    
    const removeItemFromArray = (array, item) => removeFromArray(array, array.indexOf(item));
    
    const removeRandomFromArray = array => removeFromArray(array, randomIndex(array));
    
    const getRandomFromArray = (array) =>
    array[randomIndex(array) | 0];
    
    
    // TWEEN FACTORIES
    
    const resetPeep = ({
          stage, peep }) => {
        
      const direction = Math.random() > 0.5 ? 1 : -1;
      // using an ease function to skew random to lower values to help hide that peeps have no legs
      const offsetY = 100 - 250 * gsap.parseEase('power2.in')(Math.random());
      const startY = stage.height - peep.height + offsetY;
      let startX;
      let endX;
    
      if (direction === 1) {
        
        startX = -peep.width;
        endX = stage.width;
        peep.scaleX = 1;
      } else {
        
        startX = stage.width + peep.width;
        endX = 0;
        peep.scaleX = -1;
      }
    
      peep.x = startX;
      peep.y = startY;
      peep.anchorY = startY;
    
      return {
        
        startX,
        startY,
        endX };
    
    };
    
    const normalWalk = ({
          peep, props }) => {
        
      const {
        
        startX,
        startY,
        endX } =
      props;
    
      const xDuration = 10;
      const yDuration = 0.25;
    
      const tl = gsap.timeline();
      tl.timeScale(randomRange(0.5, 1.5));
      tl.to(peep, {
        
        duration: xDuration,
        x: endX,
        ease: 'none' },
      0);
      tl.to(peep, {
        
        duration: yDuration,
        repeat: xDuration / yDuration,
        yoyo: true,
        y: startY - 10 },
      0);
    
      return tl;
    };
    
    const walks = [
    normalWalk];
    
    
    // CLASSES
    
    class Peep {
        
      constructor({
         
        image,
        rect })
      {
        
        this.image = image;
        this.setRect(rect);
    
        this.x = 0;
        this.y = 0;
        this.anchorY = 0;
        this.scaleX = 1;
        this.walk = null;
      }
    
      setRect(rect) {
        
        this.rect = rect;
        this.width = rect[2];
        this.height = rect[3];
    
        this.drawArgs = [
        this.image,
        ...rect,
        0, 0, this.width, this.height];
    
      }
    
      render(ctx) {
        
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.scale(this.scaleX, 1);
        ctx.drawImage(...this.drawArgs);
        ctx.restore();
      }}
    
    
    // MAIN
    
    const img = document.createElement('img');
    img.onload = init;
    img.src = config.src;
    
    const canvas = document.querySelector('#canvas');
    const ctx = canvas.getContext('2d');
    
    const stage = {
        
      width: 0,
      height: 0 };
    
    
    const allPeeps = [];
    const availablePeeps = [];
    const crowd = [];
    
    function init() {
        
      createPeeps();
    
      // resize also (re)populates the stage
      resize();
    
      gsap.ticker.add(render);
      window.addEventListener('resize', resize);
    }
    
    function createPeeps() {
        
      const {
        
        rows,
        cols } =
      config;
      const {
        
        naturalWidth: width,
        naturalHeight: height } =
      img;
      const total = rows * cols;
      const rectWidth = width / rows;
      const rectHeight = height / cols;
    
      for (let i = 0; i < total; i++) {
        
        allPeeps.push(new Peep({
        
          image: img,
          rect: [
          i % rows * rectWidth,
          (i / rows | 0) * rectHeight,
          rectWidth,
          rectHeight] }));
    
    
      }
    }
    
    function resize() {
        
      stage.width = canvas.clientWidth;
      stage.height = canvas.clientHeight;
      canvas.width = stage.width * devicePixelRatio;
      canvas.height = stage.height * devicePixelRatio;
    
      crowd.forEach(peep => {
        
        peep.walk.kill();
      });
    
      crowd.length = 0;
      availablePeeps.length = 0;
      availablePeeps.push(...allPeeps);
    
      initCrowd();
    }
    
    function initCrowd() {
        
      while (availablePeeps.length) {
        
        // setting random tween progress spreads the peeps out
        addPeepToCrowd().walk.progress(Math.random());
      }
    }
    
    function addPeepToCrowd() {
        
      const peep = removeRandomFromArray(availablePeeps);
      const walk = getRandomFromArray(walks)({
        
        peep,
        props: resetPeep({
        
          peep,
          stage }) }).
    
      eventCallback('onComplete', () => {
        
        removePeepFromCrowd(peep);
        addPeepToCrowd();
      });
    
      peep.walk = walk;
    
      crowd.push(peep);
      crowd.sort((a, b) => a.anchorY - b.anchorY);
    
      return peep;
    }
    
    function removePeepFromCrowd(peep) {
        
      removeItemFromArray(crowd, peep);
      availablePeeps.push(peep);
    }
    
    function render() {
        
      canvas.width = canvas.width;
      ctx.save();
      ctx.scale(devicePixelRatio, devicePixelRatio);
    
      crowd.forEach(peep => {
        
        peep.render(ctx);
      });
    
      ctx.restore();
    }

### 第三个（旋转星球页面） ###

![在这里插入图片描述][66b3df96e10740468b89daa8500d933d.png]

### 具体代码如下：都是完整的代码，有什么问题可以评论区留言，我看到之后会回复，这个代码稍微多 ###

<!DOCTYPE html>
    <html lang="en" >
    
    <head>
      <meta charset="UTF-8">
      <title>HTML5 Canvas 3D天体运行动画DEMO演示</title>
      <link rel="stylesheet" href="login3/css/style.css">
    </head>
    
    <body>
    <div style="text-align:center;clear:both">
    </div>
      <div id="container"></div>
      <script src="login3/js/three.min.js"></script>
    <script src="login3/js/CopyShader.js"></script>
    <script src="login3/js/EffectComposer.js"></script>
    <script src="login3/js/FilmPass.js"></script>
    <script src="login3/js/FilmShader.js"></script>
    <script src="login3/js/ShaderPass.js"></script>
    <script src="login3/js/RenderPass.js"></script>
        <script  src="login3/js/index.js"></script>
    	<style>
    		*{
          
    			margin : 0;
    			padding : 0;
    		}
    		canvas{
          
    			z-index: 1;
    			position : absolute;
    			width:100%;
    			height:100%;
    		}
    	</style>
    </body>
    
    </html>

#### style.css: ####

* {
        
      margin: 0;
      padding: 0;
      outline: 0;
    }
    html, body {
        
      width: 100%;
      height: 100%;
      background:#000;
    }
    #container {
        
      width: 100%;
      height: 100%;
    }

#### three.min.js: [three.js/three.min.js at dev · mrdoob/three.js (github.com)][three.js_three.min.js at dev _ mrdoob_three.js _github.com] ####

这不是我小气，不给你们源文件，是因为这个就算是压缩的js文件，但也有八千多行代码，放在md文件里面直接有八万个词，我加载md都卡，而且我已经复制下来了，但csdn说我文字太长了，要分文章发，所以我就把代码删了，把下载地址发你们了，在github上面了
    如果打不开github，额....，那你们就在网上搜一搜，应该有不用打开github就可以下载的，如果懒得找，也可以后台

#### CopyShader.js： ####

/**
     * @author alteredq / http://alteredqualia.com/
     *
     * Full-screen textured quad shader
     */
    
    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: ####

/**
     * @author alteredq / http://alteredqualia.com/
     */
    
    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 = [];
    
    	// dependencies
    
    	if ( 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 composer
    	this.enabled = true;
    
    	// if set to true, the pass indicates to swap read and write buffer after rendering
    	this.needsSwap = true;
    
    	// if set to true, the pass clears its buffer before rendering
    	this.clear = false;
    
    	// if set to true, the result of the pass is rendered to screen
    	this.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: ####

/**
     * @author alteredq / http://alteredqualia.com/
     */
    
    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 clipped
    	this.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.js: ####

/**
     * @author alteredq / http://alteredqualia.com/
     *
     * 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" )
    
    };

#### ShaderPass.js: ####

/**
     * @author alteredq / http://alteredqualia.com/
     */
    
    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 clipped
    	this.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 );
    
    		}
    
    	}
    
    } );

#### RenderPass.js: ####

/**
     * @author alteredq / http://alteredqualia.com/
     */
    
    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;
    	}
    
    } );

#### index.js: ####

## 登录用毛玻璃特效做了处理 ##

![在这里插入图片描述][720be08b96614b8da2ddfdff8d426f0f.png]

### 毛玻璃，这个是我照着改的，参考文章放在下面 ###

## 参考文章：[纯CSS 毛玻璃效果][CSS] ##

[844519db4f634d0ca6265e611061ba4c.gif]: https://img-blog.csdnimg.cn/844519db4f634d0ca6265e611061ba4c.gif
[e2fa0d0ea7264d5b92fab3f547ec9ec4.png]: https://img-blog.csdnimg.cn/e2fa0d0ea7264d5b92fab3f547ec9ec4.png
[4c2c05f717c94b4e94815a4ddddc7238.png]: https://img-blog.csdnimg.cn/4c2c05f717c94b4e94815a4ddddc7238.png
[GSAP.MIN.JS_ DOWNLOAD - CDNPKG]: https://www.cdnpkg.com/gsap/file/gsap.min.js/
[66b3df96e10740468b89daa8500d933d.png]: https://img-blog.csdnimg.cn/66b3df96e10740468b89daa8500d933d.png
[three.js_three.min.js at dev _ mrdoob_three.js _github.com]: https://github.com/mrdoob/three.js/blob/dev/build/three.min.js
[720be08b96614b8da2ddfdff8d426f0f.png]: https://img-blog.csdnimg.cn/720be08b96614b8da2ddfdff8d426f0f.png
[CSS]: https://cloud.tencent.com/developer/article/2086925