打飞机小游戏

苏苏少年

于 2022-03-09 16:57:44 发布

阅读量9.5k

点赞数

分类专栏：小游戏-飞机大战文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_57145412/article/details/123381754

版权


<!DOCTYPE html>
<html onselectstart="return false">
    <head>
        <meta charset="UTF-8" />
        <meta name="Anthor" content="苏苏少年" />
        <title>Title</title>
        <style>
            *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
            li{ list-style-type: none;}
            body{
                overflow: hidden;
                user-select: none;
            }
            #box{
                position: relative;
                width: 512px;
                height: 768px;
                margin: 20px auto;
            }
            #map{
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url("img/bg_1.jpg");
            }
            #level{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                width: 100%;
                height: 100%;
            }
            #level h1{
                font-size: 40px;
                padding-top: 60px;
                padding-bottom: 150px;
                line-height: 60px;
                text-align: center;
                color: #fff;
            }
            #level p{
                margin: 30px auto;
                width: 200px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                background: #fff;
                font-weight: bolder;
                cursor: pointer;
            }
            #level p:hover{
                background: pink;
                color: #fff;
            }
            #map .plane,#map .biu,#map .enemy,#map .boom,#map .boom2{
                position: absolute;
            }
            #map .plane{
                z-index: 8;
            }
            #map .biu{
                z-index: 10;
            }
            #map .boom2{
                z-index: 11;
                animation: bling 2s 1;
                animation-fill-mode: forwards;
            }
            #map .enemy{
                z-index: 9;
            }
            #map .boom{
                z-index: 7;
                animation: fade .8s 1;
                animation-fill-mode: forwards;
            }
            @keyframes fade {
                from{ opacity: 1; }
                to{ opacity: 0; }
            }
            @keyframes bling {
                0%{ opacity: 1; }
                20%{ opacity: 0; }
                40%{opacity: 1; }
                60%{opacity: 0;}
                80%{opacity: 1; }
                100%{opacity: 0;}
            }
            #score{
                display: none;
                position: absolute;
                top:10px;
                left:10px;
                color: #fff;
                line-height: 20px;
                font-size: 14px;
                font-weight: bold;
                z-index:20;
            }
            #restart{
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index:30;
            }
            #restart p{
                width: 300px;
                height: 40px;
                line-height: 20px;
                margin: 140px auto;
                color: #fff;
            }

            #restart p span{
                display: block;
                font-weight : bolder;
                font-size: 22px;
                text-align: center;
            }
            #resta