three+gsap实现水晶体闪烁下雪动画效果代码-html代码-BFW代码库

three+gsap实现水晶体闪烁下雪动画效果代码

代码语言：html

所属分类：动画

代码描述：three+gsap实现水晶体闪烁下雪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.12.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CopyShader.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LuminosityHighPassShader.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ShaderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.146.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			width: 100%;
			height: 100%;
		}

		body {
			margin: 0;
			overflow: hidden;
			background: #000;
		}

		canvas {
			display: block;
			width: 100vw;
			height: 100vh;
		}

		.button-3d {
			position: fixed;
			bottom: 20px;
			left: 20px;
			padding: min(15px, 4vw) min(30px, 8vw);
			font-family: 'Press Start 2P', cursive;
			font-size: clamp(12px, 2vw, 16px);
			color: #fff;
			background: linear-gradient(45deg, #ff3366, #66ffff);
			border: none;
			border-radius: 5px;
			cursor: pointer;
			transform: perspective(1000px) rotateX(10deg);
			transition: all 0.3s ease;
			text-decoration: none;
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
			-webkit-transform: perspective(1000px) rotateX(10deg);
			-moz-transform: perspective(1000px) rotateX(10deg);
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			z-index: 1000;
			user-select: none;
			-webkit-user-select: none;
			-webkit-tap-highlight-color: transparent;
		}

		.button-3d:hover,
		.button-3d:focus {
			transform: perspective(1000px) rotateX(0deg) scale(1.05);
			-webkit-transform: perspective(1000px) rotateX(0deg) scale(1.05);
			-moz-transform: perspective(1000px) rotateX(0deg) scale(1.05);
			outline: none;
		}

		.credits {
			position: fixed;
			bottom: 20px;
			right: 20px;
			font-family: 'Press Start 2P', cursive;
			color: #fff;
			font-size: clamp(10px, 1.5vw, 14px);
			text-shadow: 0 0 10px #66ffff;
			z-index: 1000;
			user-select: none;
			-webkit-user-select: none;
		}

		@media (max-width.........完整代码请登录后点击上方下载按钮下载查看