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

gsap实现多阶拼图游戏代码

代码语言：html

所属分类：游戏

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap" rel="stylesheet">



    <style>
        html,
        body {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          height: 100%;
        }
        
        *,
        *:before,
        *:after {
          box-sizing: border-box;
        }
        
        svg {
          max-width: 100%;
          display: block;
          pointer-events: none;
        }
        
        button {
          all: unset;
          z-index: 10;
          color: white;
          border-radius: 0.5rem;
          font-family: Playfair Display;
          font-size: 1.5rem;
          cursor: pointer;
        }
        button span {
          pointer-events: none;
        }
        
        .hidden {
          opacity: 0;
        }
        
        body {
          --body-color: hsl(220, 80%, 15%);
          --section-color: hsl(220, 75%, 13%);
          overflow-x: hidden;
          max-width: 70rem;
          margin-inline: auto;
          display: grid;
          gap: 1.15rem;
          grid-auto-rows: 1fr;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
          background: #e9effb;
          padding: 5vh 3vw;
        }
        body.full {
          grid-auto-columns: 1fr;
          grid-template-columns: unset;
        }
        
        .preview,
        .buttons,
        .puzzle,
        .close {
          display: none;
        }
        
        section {
          --url: "";
          --square: 40px;
          --size: 3;
          --left: 2 / 4;
          --right: 11 / -1;
          overflow: hidden;
          position: relative;
          perspective: 800px;
          box-shadow: 0 0 5px black;
          background: linear-gradient(34deg, #081d4a 0%, #092052 16%, #0a245a 33%, #0b2762 50%, #0c2a6a 66%, #0d2e72 83%, #0f317a 100%);
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
          place-items: center;
          column-gap: 1.25rem;
        }
        section > * {
          grid-area: 1/1/-1/-1;
        }
        section.selected {
          grid-row: 1/6;
          grid-column: span 3;
          grid-template-columns: repeat(13, 1fr);
          grid-template-rows: repeat(13, 1fr);
        }
        section.selected .title {
          grid-column: var(--left);
          grid-row: 1/4;
        }
        section.selected .close {
          grid-column: var(--right);
          grid-row: 1/4;
        }
        section.selected .buttons {
          grid-column: var(--l.........完整代码请登录后点击上方下载按钮下载查看