CSS制作麻将

CSS 制作麻将的基本思路

使用CSS制作麻将牌主要涉及HTML结构设计、CSS样式绘制以及交互效果实现。麻将牌通常由背景、文字、图案等元素构成，通过CSS的border-radius、box-shadow、渐变等属性模拟立体感和材质。

HTML 结构设计

麻将牌通常分为牌面和牌背。牌面包含数字和花色符号，牌背为统一图案。HTML结构可采用嵌套div实现：

<div class="mahjong-tile">
  <div class="tile-face">
    <div class="tile-top">九</div>
    <div class="tile-suit">条</div>
  </div>
  <div class="tile-back"></div>
</div>

CSS 样式绘制

牌面样式

.mahjong-tile {
  width: 60px;
  height: 80px;
  position: relative;
  perspective: 1000px;
}

.tile-face, .tile-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  background: linear-gradient(to bottom, #f9f2e8, #e8d9c5);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.tile-top {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 18px;
  color: #333;
}

.tile-suit {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 24px;
  color: #c00;
}

牌背样式

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

交互效果实现

通过CSS动画实现翻牌效果：

.mahjong-tile.flipped .tile-face {
  transform: rotateY(180deg);
}

.mahjong-tile.flipped .tile-back {
  transform: rotateY(0deg);
}

.tile-face, .tile-back {
  transition: transform 0.6s;
}

不同花色的变体

通过CSS类名区分不同花色：

/* 万子 */
.tile-character {
  color: #000;
}

/* 筒子 */
.tile-dot .tile-suit::after {
  content: "●";
  color: #c00;
}

/* 条子 */
.tile-bamboo .tile-suit {
  color: #093;
}

完整示例

结合JavaScript实现点击翻转：

<div class="mahjong-tile" onclick="this.classList.toggle('flipped')">
  <!-- 同上 -->
</div>

通过调整CSS中的尺寸、颜色和字体，可以制作出不同风格的麻将牌。对于更复杂的图案（如花牌），可考虑使用SVG或背景图片嵌入。