当前位置：首页 > CSS

CSS制作麻将

2026-04-01 11:59:22CSS

CSS制作麻将的基本方法

使用CSS制作麻将牌需要结合HTML和CSS技术，通过盒模型、阴影、圆角等属性模拟麻将牌的视觉效果。麻将牌通常由背景色、边框、文字或图案组成。

<div class="mahjong-tile">
  <span class="tile-suit">万</span>
  <span class="tile-number">一</span>
</div>

.mahjong-tile {
  width: 50px;
  height: 70px;
  background-color: #f8e8c8;
  border-radius: 5px;
  border: 2px solid #8b4513;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.tile-suit {
  font-size: 20px;
  color: #d9534f;
}

.tile-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

麻将牌样式变化

不同花色的麻将牌可以通过修改颜色和内容来实现。例如筒子牌可以改用圆形图案表示：

.circle-tile {
  background-color: #fff;
}

.circle-tile::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background-color: #d9534f;
  border-radius: 50%;
  margin: 5px;
}

3D效果实现

为麻将牌添加3D效果可以使用CSS transform和box-shadow属性：

.mahjong-tile-3d {
  transform: perspective(500px) rotateX(10deg);
  box-shadow: 3px 3px 10px rgba(0,0,0,0.5), 
              inset 0 0 20px rgba(255,255,255,0.5);
  transition: transform 0.3s ease;
}

.mahjong-tile-3d:hover {
  transform: perspective(500px) rotateX(10deg) translateY(-10px);
}

响应式设计

确保麻将牌在不同设备上显示正常：

@media (max-width: 768px) {
  .mahjong-tile {
    width: 40px;
    height: 56px;
  }

  .tile-suit {
    font-size: 16px;
  }

  .tile-number {
    font-size: 20px;
  }
}

动画效果

添加点击或悬停动画增强交互体验：

CSS制作麻将

@keyframes tileFlip {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}

.mahjong-tile-animate {
  animation: tileFlip 0.6s ease;
}

这些CSS技术可以组合使用，创建出各种样式和效果的麻将牌。通过调整尺寸、颜色和内容，可以制作出完整的麻将牌组。