css制作牌

CSS 制作牌

使用CSS制作牌可以通过纯CSS或结合HTML实现。以下是几种常见的实现方法：

纯CSS扑克牌

<div class="card">
  <div class="top suit">♥</div>
  <div class="number">A</div>
  <div class="bottom suit">♥</div>
</div>

.card {
  width: 100px;
  height: 150px;
  border: 1px solid #000;
  border-radius: 5px;
  position: relative;
  background: white;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.suit {
  font-size: 20px;
  position: absolute;
}

.top {
  top: 5px;
  left: 5px;
}

.bottom {
  bottom: 5px;
  right: 5px;
  transform: rotate(180deg);
}

.number {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3D翻转效果牌

<div class="card-container">
  <div class="card">
    <div class="front">正面内容</div>
    <div class="back">背面图案</div>
  </div>
</div>

.card-container {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card:hover {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.front {
  background: white;
  border: 1px solid #ccc;
}

.back {
  background: repeating-linear-gradient(
    45deg,
    #ff0000,
    #ff0000 10px,
    #ffffff 10px,
    #ffffff 20px
  );
  transform: rotateY(180deg);
}

动画效果的牌

@keyframes deal {
  0% { transform: scale(0.5) rotate(-30deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.card {
  animation: deal 0.5s ease-out;
}

牌组布局

.card-deck {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
}

.card {
  width: 120px;
  height: 180px;
  margin: 5px;
}

这些方法可以根据需要组合使用，创建出各种不同风格的牌效果。通过调整尺寸、颜色和动画参数，可以制作出符合项目需求的牌面设计。