html css做骰子,纯 CSS 制作摇骰子(随机结果)
时间: 2023-08-11 17:11:46 浏览: 49
可以使用CSS的`animation`属性和`@keyframes`规则来制作纯CSS的骰子效果。以下是一个简单的示例:
HTML代码:
```html
<div class="dice">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
```
CSS代码:
```css
.dice {
position: relative;
width: 100px;
height: 100px;
perspective: 1000px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
background-color: white;
}
.front {
transform: translateZ(50px);
}
.back {
transform: translateZ(-50px) rotateX(180deg);
}
.left {
transform: translateX(-50px) rotateY(-90deg);
}
.right {
transform: translateX(50px) rotateY(90deg);
}
.top {
transform: translateY(-50px) rotateX(90deg);
}
.bottom {
transform: translateY(50px) rotateX(-90deg);
}
@keyframes roll {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
25% {
transform: rotateX(360deg) rotateY(0) rotateZ(0);
}
50% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(0);
}
75% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.dice.roll {
animation: roll 2s ease-in-out;
}
```
在上面的代码中,我们使用`perspective`属性来启用3D透视。然后,我们定义了一个`.dice`类来包含骰子的6个面。每个面都用一个`.face`类表示,并使用不同的`transform`属性来定位和旋转它们。最后,我们定义了一个名为`roll`的`@keyframes`动画,它将骰子随机旋转2秒,用于展示随机结果。
要让骰子滚动,只需向`.dice`元素添加`roll`类,例如:
```javascript
const dice = document.querySelector('.dice');
dice.classList.add('roll');
```
这将触发`roll`动画,并在2秒后停止。你可以使用JavaScript来计算随机结果,并在动画结束时更新骰子的面。