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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0