html css做骰子,纯 CSS 制作摇骰子(随机结果)
时间: 2023-08-11 20:11:46 浏览: 69
好的,以下是一个使用纯 CSS 制作摇骰子的示例代码:
HTML 代码:
```html
<div class="dice">
<div class="face front"></div>
<div class="face top"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face bottom"></div>
<div class="face back"></div>
</div>
```
CSS 代码:
```css
.dice {
width: 100px;
height: 100px;
position: relative;
perspective: 1000px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid black;
background-color: white;
}
.front {
transform: translateZ(50px);
}
.top {
transform: rotateX(-90deg) translateZ(50px);
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
.left {
transform: rotateY(-90deg) translateZ(50px);
}
.bottom {
transform: rotateX(90deg) translateZ(50px);
}
.back {
transform: rotateY(180deg) translateZ(50px);
}
.dice.shake .front,
.dice.shake .top,
.dice.shake .right,
.dice.shake .left,
.dice.shake .bottom,
.dice.shake .back {
animation: shake 1s linear infinite;
}
@keyframes shake {
0% {
transform: translate3d(0, 0, 0);
}
10% {
transform: rotate3d(0, 0, 1, -10deg) translate3d(0, 0, 0);
}
20% {
transform: rotate3d(0, 0, 1, 10deg) translate3d(0, 0, 0);
}
30% {
transform: rotate3d(0, 0, 1, -10deg) translate3d(0, 0, 0);
}
40% {
transform: rotate3d(0, 0, 1, 10deg) translate3d(0, 0, 0);
}
50% {
transform: rotate3d(0, 0, 1, -10deg) translate3d(0, 0, 0);
}
60% {
transform: rotate3d(0, 0, 1, 10deg) translate3d(0, 0, 0);
}
70% {
transform: rotate3d(0, 0, 1, -10deg) translate3d(0, 0, 0);
}
80% {
transform: rotate3d(0, 0, 1, 10deg) translate3d(0, 0, 0);
}
90% {
transform: rotate3d(0, 0, 1, -10deg) translate3d(0, 0, 0);
}
100% {
transform: rotate3d(0, 0, 1, 0deg) translate3d(0, 0, 0);
}
}
```
使用 JavaScript 可以实现点击摇骰子的效果,如下所示:
```javascript
const dice = document.querySelector('.dice');
dice.addEventListener('click', () => {
dice.classList.add('shake');
setTimeout(() => {
dice.classList.remove('shake');
const result = Math.floor(Math.random() * 6) + 1;
alert(`你摇到了 ${result} 点!`);
}, 1000);
});
```
这样就可以实现一个简单的纯 CSS 制作摇骰子并随机结果的效果了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)