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即可创建视觉准确的骰子效果。
