用css制作骰子

2026-04-02 05:30:40CSS

使用CSS制作骰子

通过CSS的flexbox和border-radius属性可以轻松实现骰子效果。以下是一个完整的实现方法：

HTML结构

<div class="dice">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS样式

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

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

调整点数布局

通过调整flexbox的排列方式可以实现不同点数的骰子面：

1点骰子

.dice.one {
  justify-content: center;
  align-items: center;
}
.dice.one .dot:not(:first-child) {
  display: none;
}

3点骰子

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

添加3D效果

使用transform属性可以增加立体感：

.dice {
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(15deg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

动画效果

添加旋转动画使骰子更生动：

用css制作骰子

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

.dice.animated {
  animation: roll 2s infinite linear;
}

通过组合这些CSS技术，可以创建出各种不同状态和效果的骰子。调整尺寸、颜色和动画参数可获得不同风格的骰子效果。