文章 - 偶尔看到网上一张gif图，觉得这个游戏不错，试着自己写一下，哈哈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bran's game</title>
    <link rel="stylesheet" href="https://v3.bootcss.com/dist/css/bootstrap.min.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        dl{
           overflow: hidden;
           margin-bottom:0;
        }
        dt{
            float:left;
        }
        dd{
            float:left;
        }
        html,body{
            width:100%;
            height:100%;
            font-size: 12px;
        }
        .myContainer{
            margin:0 auto;
            max-width:800px;
        }

#timeArea{
            text-align: center;
            font-size:16px;
            color:red;
            position: absolute;
            left:50%;
        }
        .score{
            padding:20px 10px 0 10px;
            position: relative;
        }
        .stage{
            width:100%;
            padding:20px 10px 0px;
        }
        .stage .card{
            border:1px solid white;
            box-sizing: border-box;
            float:left;
            position: relative;
            perspective: 800px;
        }

.stage .card span{
            position: absolute;
            left:0;
            top:0;
            width:100%;
            height: 100%;
            backface-visibility: hidden;
            transition:.8s ease-in-out;
            transition-duration: 1s;
            text-align: center;
            font-size: 2rem;
            color:purple;
            padding-top:2.5rem;
        }

@media screen and (min-width:320px){
            .stage .card span{
                font-size:1.5rem;
                padding-top:1rem;
            }
        }
        .stage .card .frontStyle{
            z-index: 2;
            background-color:lightblue;
        }
        .stage .card .backStyle{
            background-color:green;
            z-index: 1;  
            transform:rotateY(180deg)
        }

.initRotateFront{
            transform:rotateY(180deg);
        }
        .stage .card .initRotateBack{
            transform:rotateY(0);
        }

.stage .card .frontRotate{
            transform:rotateY(0);
        }

.stage .card .backRotate{
            transform:rotateY(-180deg);
        }

.mySkew{
            animation-name: mySkewAnimation;
            animation-delay: .2s;
            animation-fill-mode:forwards;
            animation-duration: 1s;
        }
        .myScale{
            animation-name: myScaleAnimation;
            animation-delay: .2s;
            animation-fill-mode:forwards;
            animation-duration: .5s;
        }
        .myRotate{
            animation-name: myRotateAnimation;
            animation-delay: .2s;
            animation-fill-mode:forwards;
            animation-duration: .5s;
        }
        .myColor{
            animation-name: myColorAnimation;
            animation-delay: .2s;
            animation-fill-mode:forwards;
            animation-duration: .5s;
        }
        .myMove{
            animation-name: myMoveAnimation;
            animation-delay: .2s;
            animation-fill-mode:forwards;
            animation-duration: .5s;
        }
        .endGame{
            animation-name: myEndAnimation;
            animation-delay: .2s;
            animation-fill-mode:forwards;
            animation-duration: 2s;

}

@keyframes mySkewAnimation{
            0%{transform: skew(0deg)}
            25%{transform: skew(10deg)}
            75%{transform:skew(-10deg)}
            100%{transform:skew(0deg)}
        }

@keyframes myScaleAnimation{
            0%{transform: scale(1)}
            25%{transform: scale(1.2)}
            75%{transform:scale(1.3)}
            100%{transform:scale(1)}
        }

@keyframes myRotateAnimation{
            0%{transform: rotateZ(0deg)}
            100%{transform: rotateZ(360deg)}
        }

@keyframes myEndAnimation{
            0%{transform: rotateZ(0deg);opacity: 1;}
            100%{transform:rotateZ(360deg);opacity: 0;}
        }

@keyframes myColorAnimation{
            0%{background-color: red;}
            10%{background-color: orange;}
            20%{background-color:green;}
            30%{background-color: lightgreen;}
            40%{background-color: blue;}
            50%{background-color: lightblue;}
            60%{background-color: wheat;}
            70%{background-color: gray;}
            80%{background-color: black;}
            90%{background-color: pink;}
            100%{background-color: purple;}
        }
        @keyframes myMoveAnimation{
            0%{opacity:1;transform: translateX(0)}
            25%{opacity:1;transform: translateX(-200px)}
            50%{opacity:1;transform: translateX(0)}
            75%{opacity:1;transform: translateX(200px)}
            100%{opacity:1;transform: translateX(0)}
        }
    </style>
</head>
<body>
    <div class="myContainer">
        <div class="score">
            <div id="timeArea"></div>
            <dl>
                <dt>STEPS:</dt>
                <dd id="count">0</dd>
            </dl>
        </div>
        <div class="stage">

</div>
    </div>

}
    </script>
</body>
</html>

偶尔看到网上一张gif图，觉得这个游戏不错，试着自己写一下，哈哈

评论 ( 1 )

最新评论

偶尔看到网上一张gif图，觉得这个游戏不错，试着自己写一下，哈哈

评论 ( 1 )

最新评论

欢迎您回来

创建账号

找回密码