css怎么做点数四点骰子

要制作一个点数四点骰子，你可以使用CSS的伪元素和动画效果来实现。下面是一个简单的例子：

HTML代码：

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

CSS代码：

.dice {
  width: 100px;
  height: 100px;
  position: relative;
}

.side {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
  box-sizing: border-box;
}

.side::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.side.one::before,
.side.six::before {
  opacity: 1;
}

.side.one::before {
  top: 50%;
  left: 50%;
}

.side.two::before,
.side.three::before {
  top: 33%;
  left: 33%;
}

.side.three::before,
.side.four::before {
  top: 66%;
  left: 66%;
}

.side.five::before {
  top: 33%;
  left: 66%;
}

.side.five::before,
.side.six::before {
  top: 66%;
  left: 33%;
}

.side.one {
  transform: rotateX(0deg) translateZ(50px);
}

.side.two {
  transform: rotateY(-90deg) translateZ(50px);
}

.side.three {
  transform: rotateY(90deg) translateZ(50px);
}

.side.four {
  transform: rotateX(-90deg) translateZ(50px);
}

.side.five {
  transform: rotateX(90deg) translateZ(50px);
}

.side.six {
  transform: rotateY(180deg) translateZ(50px);
}

.dice:hover .side {
  transform: translateZ(-10px);
}

这个例子中，我们使用了CSS的3D变换和伪元素来制作一个点数四点的骰子。每个面都有一个黑色的点，其中一面是1，另一面是6。当鼠标悬停在骰子上时，它变得更加立体，伪装成一个3D骰子。

你可以根据需要更改CSS属性来自定义骰子的样式和动画效果。