css制作筛子

使用CSS制作骰子

通过CSS的Flexbox和Grid布局可以轻松实现骰子点数排列效果。以下是两种常见骰子点数的实现方法：

基础骰子结构

<div class="dice">
  <div class="dot"></div>
  <!-- 更多点数根据需求添加 -->
</div>

.dice {
  width: 100px;
  height: 100px;
  background: white;
  border: 2px solid black;
  border-radius: 10px;
  padding: 10px;
  display: flex;
}

.dot {
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
}

单点骰子（中心点）

.dice.one {
  justify-content: center;
  align-items: center;
}

两点骰子（对角排列）

.dice.two {
  justify-content: space-between;
}
.dice.two .dot:nth-child(2) {
  align-self: flex-end;
}

三点骰子（对角+中心）

.dice.three {
  justify-content: space-between;
}
.dice.three .dot:nth-child(2) {
  align-self: center;
}
.dice.three .dot:nth-child(3) {
  align-self: flex-end;
}

四点骰子（四角排列）

.dice.four {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
}

五点骰子（四角+中心）

.dice.five {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.dice.five .dot:nth-child(1) { grid-area: 1 / 1; }
.dice.five .dot:nth-child(2) { grid-area: 1 / 3; }
.dice.five .dot:nth-child(3) { grid-area: 2 / 2; }
.dice.five .dot:nth-child(4) { grid-area: 3 / 1; }
.dice.five .dot:nth-child(5) { grid-area: 3 / 3; }

六点骰子（双排三点）

.dice.six {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}

动画效果（可选）

添加旋转动画增强交互感：

@keyframes roll {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.dice.rolling {
  animation: roll 0.5s ease-out;
}

通过调整HTML中骰子容器的类名（如class="dice three"）即可切换不同点数样式。这种方法完全使用CSS实现，无需JavaScript即可创建视觉准确的骰子效果。