css+js实现三维游戏棋盘效果代码-html代码-BFW代码库

css+js实现三维游戏棋盘效果代码

代码语言：html

代码描述：css+js实现三维游戏棋盘效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        #wrapper {
          position: absolute;
          inset: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #000000;
          perspective: 1000vmin;
        }
        #board {
          position: relative;
          width: 50vmin;
          height: 50vmin;
          background-color: #373737;
          transform-style: preserve-3d;
          transform: rotateX(45deg) rotateZ(45deg);
        }
        #board.intro {
          -webkit-animation: introBoard 1000ms ease-in-out forwards;
                  animation: introBoard 1000ms ease-in-out forwards;
        }
        #board::before,
        #board::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
        }
        #board::before {
          background-color: #474747;
          transform: rotateX(-90deg) translateY(150%) translateZ(25vmin) scaleY(3);
        }
        #board::after {
          background-color: #222222;
          transform: rotateY(90deg) translateX(150%) translateZ(25vmin) scaleX(3);
        }
        #board.jiggle {
          -webkit-animation: jiggleBoard 500ms linear forwards;
                  animation: jiggleBoard 500ms linear forwards;
        }
        .gridParent {
          position: absolute;
          inset: 3vmin;
          display: grid;
          grid-template-columns: repeat(8, 1fr);
        }
        .gridParent,
        .gridDot {
          border: 0.5px solid yellow;
          transform-style: preserve-3d;
        }
        .gridDot {
          position: relative;
          transition: all 150ms linear 0s;
        }
        .gridDot.selected {
          background-color: rgba(255, 255, 255, 0.8);
        }
        .gridDot::before,
        .gridDot::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 200%;
          opacity: 0;
          transition: opacity 150ms linear 0s;
        }
        .gridDot.selected::before,
        .gridDot.selected::after {
          opacity: 1;
        }
        .gridDot::before {
          width: 200%;
          height: 100%;
          transform: translateX(0%) rotateY(-90deg) translateX(50%);
          background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
          );
        }
        .gridDot::after {
          transform: translateY(-1%) rotateX(-90deg) translateY(-50%);
          background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
          );
        }
        
        @-webkit-keyframes introBoard {
          0% {
            transform: rotateX(90deg) rotateZ(45deg);
          }
          100% {
            transform: rotateX(45deg) rotateZ(45deg);
          }
        }
        
        @keyframes introBoard {
          0% {
            transform: rotateX(90deg) rotateZ(45deg);
          }
          100% {
            transform: rotateX(45deg) rotateZ(45deg);
          }
        }
        
        @-webkit-keyframes jiggleBoard {
          0% {
            transform: rotateX(45deg) rotateZ(45deg);
          }
          15% {
            transform: rotateX(45deg) rotateZ(40deg);
          }
          30% {
            transform: rotateX(45deg) rotateZ(49deg);
          }
          45% {
            transform: rotateX(45deg) rotateZ(42deg);
          }
          60% {
            transform: rotateX(45deg) rotateZ(47deg);
          }
          75% {
            transform: rotateX(45deg) rotateZ(44deg);
          }
          100% {
            transform: rotateX(45deg) rotateZ(45deg);
          }
        }
        
        @keyframes jiggleBoard {
          0% {
            transform: rotateX(45deg) rotateZ(45deg);
          }
          15% {
            transform: rotateX(45deg) rotateZ(40deg);
          }
          30% {
            transform: rotateX(45deg) rotateZ(49deg);
          }
          45% {
            transform: rotateX(45deg) rotateZ(42deg);
          }
          60% {
            transform: rotateX(45deg) rotateZ(47deg);
          }
          75% {
            transform: rotateX(45deg) rotateZ(44deg);
          }
          100% {
            transform: rotateX(45deg) rotateZ(45deg);
          }
        }
    </style>

  

</head>

<body>
    <div id="wrapper">
        <div id="board" class="intro" onclick="randomTwice();">
            <div class="gridParent">
                <!-- 8x8 Grid -->

                <div class="gridDot"></div>
                <div class="gridDot"></div>
                <div class="gridDot"></div>
                <div class="gridDot"></div>
                <div class="gridDot"></div>
                <div class="gridDot"></div>
                <div class=".........完整代码请登录后点击上方下载按钮下载查看