QQ登录
微博登录
GitHub登录点击代码右上角
查看演示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, p {
margin: 0;
}
button {
position: absolute;
top:310px;
width: 400px;
height: 40px;
line-height: 40px;
border: none;
background: #fff;
color:green;
font-size: 18px;
text-align: center;
border:1px solid green;
border-radius: 12px;
}
.box {
width: 400px;
height:300px;
border:1px solid #ddd;
margin: 10px auto;
perspective: 600px;
background-size: 100% 100%;
border-radius: 12px;
}
.content {
position: relative;
transform-style: preserve-3d;
margin: 150px 170px;
transition: 1s;
transform: rotateX(35deg) rotateY(0deg);
}
p {
position: absolute;
transition: 1s;
border: 1px solid #e6e6e6;
border-radius: 5px;
}
p:nth-of-type(1) {
background: white;
width: 60px;
height: 100px;
font-size: 20px;
line-height: 20px;
font-weight: bold;
color: #333;
font-family:"楷体";
text-align: center;
transform: rotateX(-180deg);
transform: rotateY(-180deg);
}
p:nth-of-type(2) {
background: #e6e6e6;
width: 60px;
height: 20px;
bottom:0px;
transform: rotateX(-90deg);
transform-origin: bottom;
}
p:nth-of-type(3) {
background: #e6e6e6;
width: 20px;
height: 100px;
left:0px;
transform: rotateY(-90deg);
transform-origin: left;
}
p:nth-of-type(4) {
background: #e6e6e6;
width: 60px;
height: 20px;
top:102px;
transform: rotateX(90deg);
transform-origin: top;
}
p:nth-of-type(5) {
background: #e6e6e6;
width: 20px;
height: 100px;
left:40px;
transform: rotateY(90deg);
transform-origin: right;
}
p:nth-of-type(6) {
background: #5a8f31;
color: #fff;
line-height: 17px;
width: 60px;
height: 100px;
text-align: center;
transform: translateZ(20px);
}
</style>
</head>
<body>
<div class="box">
<div class="content" id="cont">
<p id="p2"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="p1">
<br>点
<br>击
<br>摸
<br>牌</p>
</div>
<button onclick="location.reload()">重 来</button>
</div>
<script id="rendered-js">
var oBtn = document.getElementById('p1');
var oP = document.getElementById('p2');
var oC = document.getElementById('cont');
var arr = ["<br>捌<br><br>万", "<br>陆<br><br>万", "<br>贰<br><br>万", "<br>東<br><br>风", "<br>柒<br><br>条",
"<br>壹<br><br>皮"];
oBtn.onclick = function () {
var index = Math.floor(Math.random() * arr.length);
oC.style.transform = "rotateX(-10deg)" + "rotateY(170deg)";
oC.style.marginTop = "160px";
oP.innerHTML = arr[index];
setTimeout(function () {
if (arr[index] == arr[3]) {
alert("
万事俱备，只欠东风。
恭喜你，糊了！！！");
}
}, 800);
};
</script>
</body>
</html>参考：https://yaw.ee/1339.html，有改动
本站文章除注明转载/出处外，均为原创，若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站，谢谢合作。本站邮箱：admin@only4.work
尊重他人劳动成果，共创和谐网络环境。点击版权声明查看本站相关条款。
