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

代码语言:html

所属分类:动画

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

代码标签: 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