gsap实现拼图游戏代码-html代码-BFW代码库

gsap实现拼图游戏代码

代码语言：html

所属分类：游戏

代码描述：gsap实现拼图游戏代码

代码标签：游戏

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


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

<head>

  <meta charset="UTF-8">


  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
}

.puzzle {
  --puzzle-width: 16rem;
  --puzzle-height: 24rem;
  --puzzle-row: 3;
  --puzzle-col: 4;
  --puzzle-gap: 1px;
  --puzzle-frag-width: calc(var(--puzzle-width) / var(--puzzle-col));
  --puzzle-frag-height: calc(var(--puzzle-height) / var(--puzzle-row));
  --puzzle-img: url(//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png);
  display: flex;
  flex-wrap: wrap;
  width: calc(var(--puzzle-width) + calc(var(--puzzle-col) * var(--puzzle-gap) * 2));
  height: calc(var(--puzzle-height) + calc(var(--puzzle-row) * var(--puzzle-gap) * 2));
}
.puzzle .fragment {
  --x-offset: calc(var(--x) * var(--puzzle-frag-width) * -1);
  --y-offset: calc(var(--y) * var(--puzzle-frag-height) * -1);
  width: var(--puzzle-frag-width);
  heig.........完整代码请登录后点击上方下载按钮下载查看