css实现纸牌扑克牌洗牌效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现纸牌扑克牌洗牌效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
@font-face {
  font-family: cards;
  src: url("https://rlbaxter.us/fonts/cards.ttf");
}

body {
  font-family: sans-serif;
  padding: 5px 20px;
}

button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  font-size: 22px;
  background: orange;
  color: rgba(255, 255, 255, 0.7);
  padding: 5px 20px;
  border-radius: 8px;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.table {
  background: darkgreen;
  border-radius: 25px;
  padding: 25px;
  box-sizing: border-box;
  max-width: 900px;
  color: #fff;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#hands li {
  display: inline-block;
  padding: 10px;
  vertical-align: top;
}

#hands li p {
  margin: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 3px;
  border-radius: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

#report li {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 4px;
  margin: 5px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.playing-card {
  position: relative;
  width: 50px;
  height: 75px;
  display: inline-block;
  padding: 5px;
  font-family: cards;
  line-height: 1.2;
  text-transform: uppercase;
}

.playing-card:not(:first-child) {
  margin-left: -42px;
}

.playing-card::before {
  content: '';
  display: block;
  /*start background shamelessly stolen from interwebs https://lea.verou.me/css3patterns/#japanese-cube*/
  background-color:#556;
  background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
  linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
  linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
  linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
  linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
  linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
  background-size:80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
  /*end stolen background*/
}

.playing-card::before,
.playing-card .card-front {
  width: 50px;
  height: 75px;
  border-radius: 2px;
  transition: 1s all;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  top: 5px;
  left: 5px;
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.3);
}

.card-front {
  background: #f2f2f2;
  position: relative;
  font-size: 8px;
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
  transform: rotatey(-180deg);
  color: #444;
  display: flex;
  align-items: center;
}

.card-front span {
  flex: 1;
}

.card-front[data-card^="J"],
.card-front[data-card^="A"],
.card-front[data-card^="K"],
.card-front[data-card^="Q"] {
  font-size: 31px;
}

.card-front[data-card^="2"],
.card-front[data-card^="3"],
.card-front[data-card^="4"] {
  font-size: 14px;
}

.card-front[data-card^="5"],
.card-front[data-card^="6"] {
  font-size: 11px;
}

.card-front[data-card^="7"],
.card-front[data-card^="8"],
.card-front[data-card^="9"] {
  font-size: 9px;
}

.playing-card.flipped::before {
   transform: rotatey(-180deg);
}

.playing-card.flipped .card-front {
   transform: rotatey(0deg);
}

.card-front.hearts,
.card-front.diams {
  color: firebrick;
}

.card-front::before,
.card-front::after {
  content: attr(data-card);
  font-size: 8px;
  position: absolute;
  padding: 2px;
  letter-spacing: 0.2em;
}

.card-front::before {
  top: 0;
  left: 0;
}

.card-front::after {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
</style>



</head>

<body >

  <button class="deal-again" onclick="playingCards.deal()">Deal Again</button>
</p>
<div class="table">
  <ul id="hands"></ul>
  <h3>Stats</h3>
  <ul id="report"></ul>
</div>


  
      <script  >
const playingCards = (function() {
  const suits = ['hearts', 'diams', 'clubs', 'spades'];
  const ranks = [2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K', 'A'];
  const cards = suits.reduce((deck, suit) => {
    return [
      ...deck,
      ...ranks.map(rank =&.........完整代码请登录后点击上方下载按钮下载查看