小墨の博客

梦想需要付诸行动,否则只能是梦

原生js打麻将3D摸牌效果

点击代码右上角查看演示。

<!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

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:518
    • 页面总数:20
    • 分类总数:92
    • 标签总数:209
    • 评论总数:63
    • 浏览总数:244305

    | | |
    | |  Z-Blog PHP