css实现一个21点纸牌游戏效果代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：css实现一个21点纸牌游戏效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  


  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,700;1,400&amp;display=swap'>
  
<style>
body {
  padding: 0;
  margin: 0;
  background-color: #327932;
  height: 100vh;
  overflow: hidden;
  font-family: "Open Sans", sans-serif;
  --card-size: 1vh;
  --card-width: calc(36 * var(--card-size));
  --card-height: calc(54 * var(--card-size));
  --card-base-x: calc(0.15 * var(--card-width));
  --card-base-y: calc(0.15 * var(--card-width));
}
@media (max-aspect-ratio: 1/1) {
  body {
    --card-size: 0.4vh;
  }
}

@property --warningPosition {
  intial-value: 100%;
  inherits: false;
  syntax: "<percentage>";
}
@keyframes hideWarning {
  to {
    --warningPosition: 100%;
  }
}
#warning {
  font-weight: 300;
  position: absolute;
  --warningPosition: 0%;
  top: var(--warningPosition, 0);
  animation: 0s linear 0s 1 forwards running hideWarning;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #327932;
  z-index: 500;
  color: #fff;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#warning p {
  padding: 1rem;
}
#warning a {
  color: #fff;
  transition: 0.125s all;
}
#warning a:hover {
  color: #02111d;
}

h2 {
  padding: 0;
  margin: 0;
  font-weight: 400;
}

form,
.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.stage {
  z-index: 0;
  color: #fff;
  display: flex;
  flex-direction: row;
}
@media (max-aspect-ratio: 1/1) {
  .stage {
    flex-direction: column;
  }
}
.stage__body {
  --card-offset: 0;
  text-align: center;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-aspect-ratio: 1/1) {
  .stage__body {
    width: 100%;
    height: 50%;
  }
}
.stage__body--dealer {
  --stage-center-x: calc(
    75vw -
      (
        var(--card-width) / 2 +
          (var(--card-offset) * var(--card-base-x) / 2)
      )
  );
  --stage-center-y: calc(
    50vh -
      (
        var(--card-height) / 2 +
          (var(--card-offset) * var(--card-base-y) / 2)
      )
  );
  order: 2;
}
@media (max-aspect-ratio: 1/1) {
  .stage__body--dealer {
    order: 1;
    --stage-center-x: calc(
      50vw -
        (
          var(--card-width) / 2 +
            (var(--card-offset) * var(--card-base-x) / 2)
        )
    );
    --stage-center-y: calc(
      22vh -
        (
          var(--card-height) / 2 +
            (var(--card-offset) * var(--card-base-y) / 2)
        )
    );
  }
}
.stage__body--player {
  --stage-center-x: calc(
    25vw -
      (
        var(--card-width) / 2 +
          (var(--card-offset) * var(--card-base-x) / 2)
      )
  );
  --stage-center-y: calc(
    50vh -
      (
        var(--card-height) / 2 +
          (var(--card-offset) * var(--card-base-y) / 2)
      )
  );
  order: 1;
}
@media (max-aspect-ratio: 1/1) {
  .stage__body--player {
    order: 2;
    --stage-center-x: calc(
      50vw -
        (
          var(--card-width) / 2 +
            (var(--card-offset) * var(--card-base-x) / 2)
        )
    );
    --stage-center-y: calc(
      72vh -
        (
          var(--card-height) / 2 +
            (var(--card-offset) * var(--card-base-y) / 2)
        )
    );
  }
}
.stage__labels {
  display: flex;
  padding: 1rem 0;
  opacity: 0;
  transition: 0.25s all;
  flex-direction: row;
}
@media (min-height: 480px) {
  .stage__labels {
    flex-direction: column;
  }
}
@media (max-aspect-ratio: 1/1) {
  .stage__labels.stage__labels--player {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
.stage__labels--main {
  display: none;
}
@media (min-height: 480px) {
  .stage__labels--main {
    display: flex;
    justify-content: center;
  }
}
.stage__labels--total {
  text-align: left;
  width: 100%;
  display: flex;
  justify-content: center;
}
.stage__labels--total .sm {
  display: inline-block;
  margin-right: 0.25rem;
}
@media (min-height: 480px) {
  .stage__labels--total .sm {
    display: none;
  }
}
.stage__labels--total.user-total {
  counter-increment: userTotalCounter var(--user-total);
}
.stage__labels--total.user-total:after {
  font-weight: 600;
  padding-left: 0.5rem;
  content: counter(userTotalCounter);
}
.stage__labels--total.dealer-total {
  counter-increment: dealerTotalCounter var(--dealer-total);
}
.stage__labels--total.dealer-total:after {
  font-weight: 600;
  padding-left: 0.5rem;
  content: counter(dealerTotalCounter);
}

input,
input:checked + .label-hit,
#start:not(:checked) + label ~ label,
#start:checked + label,
#stand:checked ~ label {
  display: none;
}

label {
  position: absolute;
  z-index: 100;
  color: #fff;
  width: 10rem;
  display: inline-block;
  text-align: center;
  background-color: #02111d;
  font-size: 1.5rem;
  padding: 0.5rem 0;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.125s;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}
label.label-hit {
  top: calc(50vh - 2rem);
}
label#label-stand {
  top: calc(50vh + 2rem);
}
@media (max-aspect-ratio: 1/1) {
  label.label-hit {
    top: 50%;
    left: calc(50vw - 6rem);
  }
  label#label-stand {
    top: 50%;
    left: calc(50vw + 6rem);
  }
}
label:hover {
  background-color: #052d4d;
}

.card {
  position: absolute;
  left: var(--stage-center-x);
  top: var(--stage-center-y);
  transition: 0.5s all;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  width: var(--card-width);
  height: var(--card-height);
}
.card[class^=card--u], .card[class*=" card--u"] {
  opacity: 0;
}
.card__face {
  background-image: url("https://assets.codepen.io/67732/card-faces.svg");
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-size: auto 400%;
  background-repeat: no-repeat;
}
.card:nth-child(1) {
  margin-left: calc(0 * var(--card-base-x));
  margin-top: calc(0 * var(--card-base-y));
}
.card:nth-child(2) {
  margin-left: calc(1 * var(--card-base-x));
  margin-top: calc(1 * var(--card-base-y));
}
.card:nth-child(3) {
  margin-left: calc(2 * var(--card-base-x));
  margin-top: calc(2 * var(--card-base-y));
}
.card:nth-child(4) {
  margin-left: calc(3 * var(--card-base-x));
  margin-top: calc(3 * var(--card-base-y));
}
.card:nth-child(5) {
  margin-left: calc(4 * var(--card-base-x));
  margin-top: calc(4 * var(--card-base-y));
}

@keyframes drawCard {
  0% {
    opacity: 0;
    transform: translate(0, -100vh) rotateZ(10deg);
  }
  1% {
    opacity: 1;
  }
  50% {
    transform: translate(0, -100vh) rotateZ(10deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0, 0vh) rotateZ(0deg);
  }
}
@property --ua-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --ua-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes uaValue {
  from {
    --ua-offset: 1;
  }
  to {
    --ua-offset: 13;
  }
}
@keyframes uaSuitValue {
  from {
    --ua-suit: 0;
  }
  to {
    --ua-suit: 3;
  }
}
@property --ub-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --ub-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes ubValue {
  from {
    --ub-offset: 1;
  }
  to {
    --ub-offset: 13;
  }
}
@keyframes ubSuitValue {
  from {
    --ub-suit: 0;
  }
  to {
    --ub-suit: 3;
  }
}
@property --uc-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --uc-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes ucValue {
  from {
    --uc-offset: 1;
  }
  to {
    --uc-offset: 13;
  }
}
@keyframes ucSuitValue {
  from {
    --uc-suit: 0;
  }
  to {
    --uc-suit: 3;
  }
}
@property --ud-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --ud-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes udValue {
  from {
    --ud-offset: 1;
  }
  to {
    --ud-offset: 13;
  }
}
@keyframes udSuitValue {
  from {
    --ud-suit: 0;
  }
  to {
    --ud-suit: 3;
  }
}
@property --ue-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --ue-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes ueValue {
  from {
    --ue-offset: 1;
  }
  to {
    --ue-offset: 13;
  }
}
@keyframes ueSuitValue {
  from {
    --ue-suit: 0;
  }
  to {
    --ue-suit: 3;
  }
}
@property --da-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --da-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes daValue {
  from {
    --da-offset: 1;
  }
  to {
    --da-offset: 13;
  }
}
@keyframes daSuitValue {
  from {
    --da-suit: 0;
  }
  to {
    --da-suit: 3;
  }
}
@property --db-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --db-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes dbValue {
  from {
    --db-offset: 1;
  }
  to {
    --db-offset: 13;
  }
}
@keyframes dbSuitValue {
  from {
    --db-suit: 0;
  }
  to {
    --db-suit: 3;
  }
}
@property --dc-offset {
  syntax: "<integer>";
  initial-value: 1;
  inherits: true;
}
@property --dc-suit {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes dcValue {
  from {
.........完整代码请登录后点击上方下载按钮下载查看