three+gsap实现滚动背景图像三维碎片化动画效果代码-html代码-BFW代码库

three+gsap实现滚动背景图像三维碎片化动画效果代码

代码语言：html

代码描述：three+gsap实现滚动背景图像三维碎片化动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  


  
<style>

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100vh;
}
:root {
  scroll-behavior: smooth;
}
body {
  background: black;
  display: flex;
  flex-flow: column;
  background: #222;
}
h1 {
  font: 10vmin 'Zen Loop', cursive;
  color: white;
  text-shadow: 0 0 2px black;
  padding: 5vmin;
  box-sizing: border-box;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
  background: black;
}
article {
  box-sizing: border-box;
  padding: 5vmin;
  width: 50vw;
  overflow: hidden;
  background: #111;
  color: #ddd;
  border-radius: 5px;
  border-block: 2px solid #eee;
  border-inline: 2px solid #aaa;
  box-shadow: 0 0 0 5px #000;
  font-family: 'Yomogi', cursive;
  place-self: center;
  margin-block: 10vh;
}
article:last-of-type {
  border-radius: 5px 5px 0 0;
  border-block-end-width: 0;
  margin-block: 80vh;
  -webkit-margin-after: 0;
          margin-block-end: 0;
}
article h2 {
  font-weight: bold;
  margin: 1ch 0;
}
a {
  color: inherit;
}
</style>

&.........完整代码请登录后点击上方下载按钮下载查看