与电脑打乒乓球游戏赢了后才能取消订阅代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：与电脑打乒乓球游戏赢了后才能取消订阅代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        :root {
      --text-color: #646B8C;
      --headline-color: #2B3044;
      --mail: #555B77;
      --mail-triangle: #494F69;
      --mail-background: #404660;
      --mail-shadow: #D1D6EE;
      --paper: #fff;
      --paper-border: #D1D6EE;
      --confirm-color: #fff;
      --confirm-background: #275EFE;
      --game-paddle: #404660;
      --game-ball: #275EFE;
      --controls-text: #646B8C;
      --controls-icon: #646B8C;
      --controls-background: #E1E6F9;
    }
    
    #unsubscribe button,
    #game button {
      outline: none;
      border: none;
      display: table;
      margin: 0 auto;
      font-size: 14px;
      font-weight: 500;
      font-family: inherit;
      padding: 8px 20px;
      line-height: 21px;
      border-radius: 7px;
      cursor: pointer;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: transparent;
    }
    
    #unsubscribe .letter {
      width: 84px;
      height: 72px;
      margin: 0 auto 32px auto;
      position: relative;
      -webkit-animation: letter 2s ease infinite;
              animation: letter 2s ease infinite;
    }
    #unsubscribe .letter:before, #unsubscribe .letter:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 48px;
      z-index: 1;
    }
    #unsubscribe .letter:before {
      background: var(--mail);
      -webkit-clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
              clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
    }
    #unsubscribe .letter:after {
      background: var(--mail-triangle);
      -webkit-clip-path: polygon(0 100%, 50% 55%, 100% 100%);
              clip-path: polygon(0 100%, 50% 55%, 100% 100%);
    }
    #unsubscribe .letter .background {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: var(--mail-background);
      -webkit-clip-path: polygon(0 24px, 50% 0, 100% 24px, 100% 100%, 0 100%);
              clip-path: polygon(0 24px, 50% 0, 100% 24px, 100% 100%, 0 100%);
    }
    #unsubscribe .letter .shadow {
      background: black;
      width: 92px;
      height: 4px;
      border-radius: 50%;
      position: absolute;
      top: 108%;
      left: -4px;
      background: var(--mail-shadow);
      -webkit-animation: shadow 2s ease infinite;
              animation: shadow 2s ease infinite;
    }
    #unsubscribe .letter .body {
      width: 360px;
      height: 260px;
      bottom: 0;
      left: -138px;
      border-radius: 1px;
      background: var(--paper);
      box-shadow: inset 0 0 0 1px var(--paper-border);
      position: absolute;
      -webkit-transform: translateY(36%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
              transform: translateY(36%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
    }
    #unsubscribe .letter .body .game {
      width: 360px;
      height: 260px;
      position: relative;
      -webkit-transition: opacity .3s ease .8s;
      transition: opacity .3s ease .8s;
    }
    #unsubscribe .letter .body .game .headline {
      position: absolute;
      left: 0;
      right: 0;
      top: -32px;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
              align-items: center;
      -webkit-transform: translateZ(0);
              transform: translateZ(0);
    }
    #unsubscribe .letter .body .game .headline span {
      color: var(--headline-color);
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
    }
    #unsubscribe .letter .body .game .headline .close {
      cursor: pointer;
    }
    #unsubscribe .letter .body .game .headline .close svg {
      width: 20px;
      height: 20px;
      display: block;
      fill: var(--text-color);
      padding: 2px;
    }
    #unsubscribe .letter .body .game .paddle,
    #unsubscribe .letter .body .game .ball {
      top: 0;
      position: absolute;
      -webkit-transition: opacity .3s;
      transition: opacity .3s;
      -webkit-transform: translate(var(--x, 0), var(--y, 0));
              transform: translate(var(--x, 0), var(--y, 0));
    }
    #unsubscribe .letter .body .game .paddle {
      width: 6px;
      height: 48px;
      border-radius: 3px;
      --y: 106px;
      background: var(--game-paddle);
    }
    #unsubscribe .letter .body .game .paddle.one {
      left: 0;
    }
    #unsubscribe .letter .body .game .paddle.two {
      right: 0;
    }
    #unsubscribe .letter .body .game .ball {
      background: var(--game-ball);
      border-radius: 50%;
      width: 16px;
      height: 16px;
      left: 0;
    }
    #unsubscribe .letter .body .game .controls {
      bottom: -80px;
      left: 0;
      right: 0;
      position: absolute;
    }
    #unsubscribe .letter .body .game .controls span {
      display: block;
      text-align: center;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 500;
      color: var(--controls-text);
    }
    #unsubscribe .letter .body .game .controls div {
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: center;
              justify-content: center;
    }
    #unsubscribe .letter .body .game .controls div button {
      width: 64px;
      padding: 8px 0;
      margin: 0;
      background: var(--controls-background);
    }
    #unsubscribe .letter .body .game .controls div button:not(:last-child) {
      margin-right: 16px;
    }
    #unsubscribe .letter .body .game .controls div button svg {
      width: 20px;
      height: 20px;
      display: block;
      margin: 0 auto;
      fill: var(--controls-icon);
    }
    #unsubscribe .letter .body .game .start {
      position: absolute;
      text-align: center;
      white-space: nowrap;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      -webkit-transition: opacity .3s;
      transition: opacity .3s;
    }
    #unsubscribe .letter .body .game .start button {
      color: var(--confirm-color);
      background: var(--confirm-background);
    }
    #unsubscribe .letter .body .game .start small {
      margin: 4px 0 0 0;
      display: block;
      font-style: italic;
      font-size: 12px;
      color: var(--text-color);
    }
    #unsubscribe .letter .body .game:not(.idle) .start {
      opacity: 0;
      pointer-events: none;
    }
    #unsubscribe .letter .body .game:not(.init) .ball {
      opacity: 0;
    }
    #unsubscribe h1 {
      text-align: center;
      margin: 0 0 8px 0;
      font-family: inherit;
      font-weight: 600;
      font-size: 24px;
      color: var(--headline-color);
    }
    #unsubscribe p {
      text-align: center;
      margin: 0;
      font-size: 16px;
      color: var(--text-color);
    }
    #unsubscribe .cta {
      margin-top: 32px;
    }
    #unsubscribe .cta button {
      color: var(--confirm-color);
      background: var(--confirm-background);
    }
    #unsubscribe:not(.show-game) .letter .body .game {
      opacity: 0;
      pointer-events: none;
      -webkit-transition-delay: 0s;
              transition-delay: 0s;
    }
    #unsubscribe.show-game .letter {
      -webkit-animation-play-state: paused;
              animation-play-state: paused;
    }
    #unsubscribe.show-game .letter .body {
      -webkit-animation: paper .8s linear forwards;
              animation: paper .8s linear forwards;
    }
    #unsubscribe.show-game .letter .shadow {
      -webkit-animation-play-state: paused;
              animation-play-state: paused;
    }
    #unsubscribe.hide-game .letter .body {
      -webkit-animation: paper-back .8s linear forwards;
              animation: paper-back .8s linear forwards;
    }
    
    @-webkit-keyframes paper {
      30% {
        z-index: 0;
        -webkit-transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
                transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
      }
      60%,
        100% {
        z-index: 2;
      }
      60% {
        -webkit-transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg);
                transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(63%) translateZ(0);
                transform: translateY(63%) translateZ(0);
      }
    }
    
    @keyframes paper {
      30% {
        z-index: 0;
        -webkit-transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
                transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
      }
      60%,
        100% {
        z-index: 2;
      }
      60% {
        -webkit-transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg);
                transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(63%) translateZ(0);
                transform: translateY(63%) translateZ(0);
      }
    }
    @-webkit-keyframes paper-back {
      0% {
        -webkit-transform: translateY(63%) translateZ(0);
                transform: translateY(63%) translateZ(0);
      }
      30% {
        -webkit-transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg);
                transform: translateY(0) translateZ(0) scale(0.2, 0.16) rotate(0deg);
      }
      60% {
        z-index: 0;
        -webkit-transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
                transform: translateY(18%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
      }
      0%,
        30% {
        z-index: 2;
      }
      100% {
        -webkit-transform: translateY(36%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
                transform: translateY(36%) translateZ(0) scale(0.2, 0.16) rotate(90deg);
      }
    }
    @keyframes paper-back {
      0% {
        -webkit-transform: translateY(63%) translateZ(0);
                transform: translateY(63%) translateZ(0);
      }.........完整代码请登录后点击上方下载按钮下载查看