gsap+three实现炫酷多彩卡片立体动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap+three实现炫酷多彩卡片立体动画效果代码
代码标签: gsap three 炫酷 多彩 卡片 立体 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { overflow: hidden; } body { margin: 0; font-family: sans-serif; --color-gray: #aaa; --color-purple: #3e3753; --ease: cubic-bezier(0.44, 0, 0.63, 1); background-image: linear-gradient(90deg, #7b89a6, #be6173); background-size: cover; background-attachment: fixed; height: 100vh; min-height: 100vh; display: flex; justify-content: center; align-items: center; } #link { bottom: 0; left: 0; position: fixed; z-index: 1000; padding: 0.5rem 1rem; width: 100%; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; color: white; } #link a { text-decoration: none; color: currentColor; cursor: pointer; } #link a:hover { color: #d0656f; cursor: pointer; text-decoration: none; } #link .ai-link { display: flex; align-items: center; margin: 0.5rem 0; } #link .ai-link svg { margin-right: 0.5em; } /**/ #smooth-wrapper { position: relative; max-width: 500px; height: 100%; width: 100%; max-height: 900px; margin: auto; overflow: auto; border-radius: 35px; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5); transition: background-color 1s linear; background-size: cover; z-index: 1; background: #3b1a23; color: white; margin: 0; font-family: "Open Sans", sans-serif; } #smooth-content { overflow-y: hidden !important; min-height: 100%; height: 100%; position: relative; z-index: 1; display: flex; background: linear-gradient(-45deg, #142641 50%, #d9a48a 90%); } * { user-select: none; } .hidden { display: none; } @media screen and (max-width: 600px), screen and (max-height: 600px) { #smooth-wrapper { height: 150% !important; transform-origin: center center; margin-top: 10%; transform: scale(0.5); } } canvas { display: block; position: absolute; top: 0; right: 0; width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 0.6; } #app { position: relative; z-index: 1; padding: 20px; box-sizing: border-box; display: flex; width: 100%; height: 100%; } main { display: flex; flex: 1; flex-direction: column; margin-right: 40px; } .mid { flex: 1; } .panel { background: #142641; border-radius: 30px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); display: flex; justify-content: space-between; padding: 20px; margin: 20px 0; } .pills { align-self: flex-end; } .pill-container { margin: 30px 0; } .pill { border-radius: 50px; background: green; width: 70px; height: 90px; background: linear-gradient(-45deg, #18f4cc 0%, #0f9990 75%); display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1.3rem; } .pill-container:nth-child(2) .pill { background: purple; background: linear-gradient(-90deg, #ca46e1 0%, #6a42fd 75%); } .pill-container:nth-child(3) .pill { background: orange; background: linear-gradient(-90deg, #faa953 0%, #fe8f4c 75%); } .pill-label { text-align: center; font-size: 8px; margin-top: 10px; text-transform: uppercase; letter-spacing: 4px; } #gui { position: absolute; top: 0; right: 0; z-index: 100; opacity: 0.7; } </style> </head> <body > <div id="smooth-wrapper"> <div id="smooth-content"> <div id="app"> <main> <div class="top"> <h1>Lojuare</h1> </div> <div class="mid"></div> <div class="bottom"> <h2>apreapbang</h2> <div class="panel"> <div>Popsicle</div> <div>$20.00</div> </div> <div class="panel"> <div>Dippin' Dots</div> <div>$15.00</div> </div> </div> </main> <div class="pills"> <div class="pill-container"> <div class="pill"> <svg> <g transform="translate(25, 60) rotate(-45)"> <rect transform="translate(2, 2)" x="0" y="0" width="5" height="30" fill="white"></rect> <rect transform="translate(-5, -2)" x="0" y="0" width="5" height="40" fill="#142641"></rect> <rect transform="translate(-14, 0)" x="0" y="0" width="5" height="35" fill="#142641"></rect> </g> </svg> </div> <div class="pill-label">one</div> </div> <div class="pill-container"> <div class="pill">33S</div> <div class="pill-label">two</div> </div> <div class="pill-container"> <div class="pill">327</div> <div class="pill-label">three</div> </div> </div> </div> </div> </div> <img id="shapeTexture" class="hidden" src="//repo.bfw.wiki/bfwrepo/image/642e2dd7f27a0.png" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script src="//repo.bfw.wiki/bfwrepo/js/mod/mod3.js"></script> <script src="//repo.bfw.wiki/bfwrepo/js/mod/Three.js"></script> <script src="//repo.bfw.wiki/bfwrepo/js/mod/perlin.js"></script> <script src="//repo.bfw.wiki/bfwrepo/js/mod/CPerlin.js"></script> <script> const showControls = true, showHelpers = false, lights = [{ type: "directional", color: 16777215, intensity: .5, distance: 1e3, position: { x: 4, y: 4, z: 5 }, target: { x: 3, y: 2, z: 5 } }, { type: "directional", color: 16777215, intensity: 3, distance: 1e3, position: { x: 0, y: 2, z: 0 }, target: { x: 0, y: -4, z: 5 } }, { type: "directional", color: 16777215, intensity: 2, distance: 1000, position: { x: 15, y: 5.5, z: -2 }, target: { x: -6, y: 1, z: 10 } }], circles = [{ speed: .021, radius: .8, color: 16737826, position: { x: 4, y: 2, z: 9 } }, { speed: .015, radius: .5, color: 16750848, position: { x: 4, y: 2, z: 10.5 } }, { speed: .022, radius: .7, color: 16742144, position: { x: 2, y: -1, z: 3.5 } }, { speed: .02, radius: .8, color: 15619362, position: { x: 2, y: 4, z: 4 } }, { speed: .005, radius: 2.5, color: 3403519, position: { x: -2, y: 2, z: 9 } }, { speed: .01, radius: .8, color: 5898495, position: { x: 5, y: -1, z: 9 } }], gui = new dat.GUI({ autoPlace: !1, name: "Controls" }); gui.hide(), gui.domElement.id = "gui", document.body.appendChild(gui.domElement); const lightsFolder = gui.addFolder("Lights"); for (let e = 0; e < lights.length; e++) addLight(e); function addLight(e) { const i = lightsFolder.addFolder(`Light ${e}`); i.addColor(lights[e], "color").name("Color"), i.add(lights[e], "intensity", 0, 2).name("Intensity"), i.add(lights[e], "distance", 0, 100).name("Distance"), i.add(lights[e].position, "x", -10, 10).name("X"), i.add(lights[e].position, "y", -10, 10).name("Y"), i.add(lights[e].position, "z", -10, 10).name("Z"), i.add(lights[e].target, "x", -10, 10).name("TX"), i.add(lights[e].target, "y", -10, 10).name("TY"), i.add(lights[e].target, "z", -10, 10).name("TZ") } const sphereFolder = gui.addFolder("Sphere"); for (let e = 0; e < circles.length; e++) addSphere(e); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0