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