three实现照片撕破幻灯片效果代码-html代码-BFW代码库

three实现照片撕破幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：three实现照片撕破幻灯片效果代码，按住左键从上往下滑动就可看到效果

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

<html lang="en"><head>

  <meta charset="UTF-8">
  

  
<style>
html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #17181D;
  padding: 0;
  position: relative;
  overflow: hidden;
}

body {
  position: relative;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}
body.zoomed, body.loading {
  overflow: hidden;
}

.page {
  z-index: 3;
  position: relative;
  margin: 0;
}
.page.under {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: -webkit-grab;
  cursor: grab;
}

.info {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
  pointer-events: none;
  right: 0;
  bottom: 0;
}
.info svg {
  opacity: 0;
  width: clamp(50px, 5vw, 120px);
  height: clamp(50px, 5vw, 120px);
  transform: translateX(150%);
}
</style>



</head>

<body >
  <canvas class="webgl" width="782" height="823" style="width: 626px; height: 659px;"></canvas>
<div class="info">
    <svg id="hand" viewBox="0 0 175 200" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: translate3d(85.2px, 99.9647%, 0px); opacity: 0;">
        <path d="M173.272 82.5157C161.668 70.5528 146.803 62.2655 130.526 58.6846C118.575 55.6811 106.321 54.0528 94.0011 53.8313V20.8535C93.8062 15.2638 91.4057 9.97869 87.3246 6.15411C83.2435 2.32953 77.8139 0.276704 72.2233 0.444604C66.6327 0.276704 61.2031 2.32953 57.122 6.15411C53.0409 9.97869 50.6404 15.2638 50.4455 20.8535V83.0757L40.49 73.2446C36.1045 68.9428 30.2064 66.5329 24.0633 66.5329C17.9201 66.5329 12.0221 68.9428 7.63662 73.2446C5.43939 75.3674 3.69046 77.9095 2.49342 80.7204C1.29638 83.5313 0.675563 86.5539 0.667733 89.609C0.553645 95.5326 2.79095 101.26 6.88996 105.538L35.8855 139.885C37.2844 148.66 40.3015 157.1 44.7833 164.773C48.0577 170.674 52.2595 176.011 57.2277 180.578V192.525C57.2082 194.228 57.8424 195.874 58.9999 197.124C60.1573 198.374 61.75 199.133 63.45 199.245H150.001C151.701 199.133 153.294 198.374 154.451 197.124C155.609 195.874 156.243 194.228 156.223 192.525V175.725C168.45 161.166 175.07 142.717 174.89 123.707V86.3735C174.812 84.9394 174.24 83.5764 173.272 82.5157V82.5157ZM162.445 124.018C162.843 140.561 157.077 156.662 146.268 169.191C144.894 170.31 144.003 171.914 143.779 173.671V187.111H69.9833V177.902C69..........完整代码请登录后点击上方下载按钮下载查看