css骰子掉落滚动动画

你可以使用 CSS3 动画和关键帧来创建一个骰子掉落滚动动画。以下是一个示例代码：

HTML代码：

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

CSS代码：

.dice {
  width: 50px;
  height: 50px;
  background: white;
  border: 1px solid black;
  position: absolute;
  top: -60px;
  animation: roll 1s ease-in-out;
}

@keyframes roll {
  0% {
    transform: translateY(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  25% {
    transform: translateY(-50px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: translateY(0px) rotateX(-90deg) rotateY(90deg) rotateZ(0deg);
  }
  75% {
    transform: translateY(0px) rotateX(-90deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    transform: translateY(0px) rotateX(0deg) rotateY(180deg) rotateZ(360deg);
  }
}

解释：

- `width` 和 `height` 属性设置骰子的大小；
- `background` 和 `border` 属性设置骰子的样式；
- `position` 和 `top` 属性将骰子放置在屏幕顶部以便掉落；
- `animation` 属性用于指定动画效果以及持续时间；
- `@keyframes` 规则定义动画的关键帧；
- `transform` 属性用于设置骰子的旋转和位移。

在这个动画中，骰子会从屏幕顶部掉落，然后在空中旋转，最终落到地面上。你可以调整关键帧的值来创建更有趣的效果。