当前位置：首页 > CSS

css制作筛子

2026-01-28 09:34:15CSS

CSS制作筛子（骰子）的方法

使用CSS可以创建一个简单的筛子（骰子）效果，主要通过border、transform和flexbox实现。以下是实现步骤：

HTML结构

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

CSS样式

css制作筛子

.dice {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 2px solid black;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

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

调整点数布局

筛子的点数布局可以通过调整flexbox或绝对定位实现。以下是不同点数的布局示例：

1点布局

css制作筛子

.dice {
  justify-content: center;
}
.dot {
  position: absolute;
}

3点布局

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

添加3D效果

通过transform属性可以为筛子添加3D旋转效果：

.dice {
  transform: rotateX(20deg) rotateY(20deg);
  transition: transform 0.5s;
}
.dice:hover {
  transform: rotateX(360deg) rotateY(360deg);
}

完整示例（6点筛子）

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

.dice {
  width: 100px;
  height: 100px;
  background: white;
  border: 2px solid #333;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
}

.row {
  display: flex;
  justify-content: space-between;
}

.dot {
  width: 15px;
  height: 15px;
  background: #333;
  border-radius: 50%;
}

通过调整HTML结构和CSS样式，可以轻松实现不同点数的筛子效果。