div+css实现井字过三关游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：div+css实现井字过三关游戏代码，两个玩家，一个打圈(O)，一个打叉(X)，轮流在3乘3的格上打自己的符号，最先以横、直、斜连成一线则为胜。如果双方都下得正确无误，将得和局。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        * {
          box-sizing: border-box;
        }
        body,
        html {
          align-items: center;
          background-color: #1f3a93;
          color: #fafafa;
          display: flex;
          flex-direction: column;
          font-family: 'Arial', sans-serif;
          justify-content: center;
          height: 100vh;
          width: 100vw;
          overflow: hidden;
          position: relative;
        }
        svg {
          height: 100px;
          width: 100px;
        }
        input {
          opacity: 0;
        }
        label {
          cursor: pointer;
          height: 100px;
          width: 100px;
          z-index: 2;
        }
        input,
        span,
        label {
          left: calc(var(--col) * 100px);
          position: absolute;
          top: calc(var(--row) * 100px);
        }
        circle,
        path {
          -webkit-animation-fill-mode: forwards;
                  animation-fill-mode: forwards;
          -webkit-animation-name: draw;
                  animation-name: draw;
        }
        circle {
          -webkit-animation-duration: 0.5s;
                  animation-duration: 0.5s;
          stroke: #f62459;
        }
        path {
          -webkit-animation-duration: 0.25s;
                  animation-duration: 0.25s;
          stroke: #36dbd7;
        }
        button {
          cursor: pointer;
          position: absolute;
          bottom: 20px;
          padding: 8px 24px;
          border-radius: 4px;
          border: 0;
          background: #1f3a93;
          font-size: 0.75rem;
          color: #fafafa;
          filter: drop-shadow(0 5px 5px #000);
          transition: transform 0.1s, filter 0.1s;
        }
        button:hover {
          filter: drop-shadow(0 5px 4px #000);
          transform: translateY(1px);
        }
        button:active {
          transform: translateY(5px);
          filter: drop-shadow(0 0 0 transparent);
        }
        span {
          display: none;
          transform: translate3d(0, 0, 3px);
        }
        input:checked + span {
          display: block;
        }
        .o {
          transform: rotateY(180deg) rotate(-35deg);
        }
        .x path:nth-of-type(2) {
          -webkit-animation-delay: 0.25s;
                  animation-delay: 0.25s;
        }
        .board {
          height: 300px;
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          transform-style: preserve-3d;
          width: 300px;
        }
        .board__line {
          height: 10px;
          left: calc(var(--x) * 100px);
          position: absolute;
          top: calc(var(--y) * 100px);
          width: 300px;
        }
        .board__line path {
          stroke: #fafafa;
        }
        .board__line:nth-of-type(1),
        .board__line:nth-of-type(2) {
          transform: rotate(90deg) translate(-5px, 0);
          transform-origin: left center;
        }
        .board__line:nth-of-type(3),
        .board__line:nth-of-type(4) {
          transform: translate(0, -50%);
        }
        .board__line:nth-of-type(1) path {
          -webkit-animation-delay: 0.25s;
                  animation-delay: 0.25s;
        }
        .board__line:nth-of-type(2) path {
          -webkit-animation-delay: 0.5s;
                  animation-delay: 0.5s;
        }
        .board__line:nth-of-type(3) path {
          -webkit-animation-delay: 0.75s;
                  animation-delay: 0.75s;
        }
        .board__line:nth-of-type(4) path {
          -webkit-animation-delay: 1s;
                  animation-delay: 1s;
        }
        .board__result {
          -webkit-animation: fadeBg 0.25s 0.5s;
                  animation: fadeBg 0.25s 0.5s;
          -webkit-animation-fill-mode: backwards;
                  animation-fill-mode: backwards;
          background: #1f3a93;
          display: none;
          height: 100%;
          left: 0;
          margin: 0;
          padding: 0;
          position: absolute;
          top: 0;
          transform: translate3d(0, 0, 4px);
          width: 100%;
        }
        .result__content {
          align-items: center;
          -webkit-animation: flyIn 0.25s 0.75s;
                  animation: flyIn 0.25s 0.75s;
          -webkit-animation-fill-mode: backwards;
                  animation-fill-mode: backwards;
          background: #fafafa;
          border-radius: 10px;
          color: #1f3a93;
          display: flex;
          filter: drop-shadow(0 10px 10px #000);
          flex-direction: column;
          height: 100%;
          justify-content: center;
          left: 0;
          margin: 0;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: 3;
        }
        .result__title {
          font-size: 1.5rem;
          font-weight: bolder;
          text-transform: uppercase;
        }
        .result__details {
          margin: 0;
        }
        .result__shield {
          -webkit-animation: fadeBg 0.25s 0.5s;
                  animation: fadeBg 0.25s 0.5s;
          -webkit-animation-fill-mode: backwards;
                  animation-fill-mode: backwards;
          background: #1f3a93;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: 2;
        }
        .result__emoji {
          font-size: 5rem;
        }
        .result__icon path:nth-of-type(1) {
          -webkit-animation-delay: 1s;
                  animation-delay: 1s;
        }
        .result__icon path:nth-of-type(2) {
          -webkit-animation-delay: 1.4s;
                  animation-delay: 1.4s;
        }
        .result__icon circle {
          -webkit-animation-delay: 1s;
                  animation-delay: 1s;
        }
        .result.........完整代码请登录后点击上方下载按钮下载查看