gsap实现可交互三维照片墙点击可放大照片代码-html代码-BFW代码库

gsap实现可交互三维照片墙点击可放大照片代码

代码语言：html

代码描述：gsap实现可交互三维照片墙点击可放大照片代码

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
html, body {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#000;
  font-size:7px;
  font-family:sans-serif;
}

body {
  display:flex;
  justify-content:center;
  align-items:center;
}

svg {
  width:100%;
  height:100%;
}

.tip {
  position:absolute;
  overflow:visible;
  left:0;
  top:0;
}
</style>


  
</head>

<body >
  <svg class="stage" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <g class="grid"></g>
  <g class="hero">
    <image href=""/>
    <g class="close">
      <rect width="6" height="6" stroke="#fff" fill="#fff" opacity=".7" rx="1"/>
      <path fill="#222" d="M4.9 0H1.2C.5 0 0 .5 0 1.1V5C0 5.5.5 6 1.1 6H5c.6 0 1-.5 1-1.1V1.2C6 .5 5.6 0 5 0Zm-.5 4-.4.4h-.2L3 3.5l-.8.9H2L1.7 4v-.2l.8-.8-.8-.8V2l.3-.3h.2l.8.8.8-.8H4l.4.3v.2l-.9.8.9.8V4Z"/>
    </g>
  </g>
</svg>

<svg class="tip" width="100" height="25" fill="#222">
  <rect width="80" height="24" rx="7"/>
  <text fill="#fff" font-size="13.5" y="15.5" text-anchor="middle"></text>
  <path d="M0,20 30,20 15,35z"/>
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
      <script  >
const stage = document.querySelector('.stage')
const grid = document.querySelector('.grid')
const close = document.querySelector('.close')
let mPos = {x:50, y:50}
let i = 0

for (let x=1; x<10; x++)
  for (let y=1; y<10; y++) { i++; makePt(x*10, y*10) }

function makePt(x,y){
  const g = document.createElementNS("http://www.w3.org/2000/svg", "g")
  const img = document.createElementNS("http://www.w3.org/2000/svg", "image")
  const depth = gsap.utils.random(0.8,1)
  grid.append(g)
  g.appendChild(img)
  gsap.set(g, {x:x, y:y, attr:{class:'pt'}, svgOrigin:'50 50.........完整代码请登录后点击上方下载按钮下载查看