2017-12-08 20:14:29 +00:00
|
|
|
body{
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
font-family: sans-serif;
|
|
|
|
background: #232323;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header{
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header h1{
|
|
|
|
display: inline-block;
|
|
|
|
font-size: 42px;
|
|
|
|
padding-top: 15px;
|
|
|
|
padding-bottom: 20px;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.map{
|
|
|
|
width: 1170px;
|
2017-12-08 20:33:51 +00:00
|
|
|
height: 460px;
|
2017-12-08 22:34:23 +00:00
|
|
|
border: solid 3px #000;
|
2017-12-08 20:14:29 +00:00
|
|
|
background: url(../img/bg_sand.png) repeat;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
2017-12-08 22:21:05 +00:00
|
|
|
overflow: hidden;
|
2017-12-08 20:14:29 +00:00
|
|
|
}
|
|
|
|
|
2017-12-08 22:21:05 +00:00
|
|
|
.tank1{
|
|
|
|
height: 36px;
|
|
|
|
width: 70px;
|
|
|
|
background: url(../img/tank_green.png) no-repeat;
|
|
|
|
position: absolute;
|
|
|
|
border: solid 1px red;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tank2{
|
|
|
|
height: 36px;
|
|
|
|
width: 70px;
|
|
|
|
background: url(../img/tank_orange.png) no-repeat;
|
2017-12-08 20:14:29 +00:00
|
|
|
position: absolute;
|
|
|
|
left: 50px;
|
2017-12-08 22:21:05 +00:00
|
|
|
top: 100px;
|
2017-12-08 22:34:23 +00:00
|
|
|
display: none;
|
2017-12-08 22:21:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.bullet{
|
|
|
|
height: 6px;
|
|
|
|
width: 6px;
|
|
|
|
background: #fff;
|
|
|
|
position: absolute;
|
|
|
|
left: 70px;
|
|
|
|
top: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.directionLeft{
|
|
|
|
transform: rotate(180deg);
|
|
|
|
}
|
|
|
|
.directionRight{
|
|
|
|
transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
.directionUp{
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
}
|
|
|
|
.directionDown{
|
|
|
|
transform: rotate(90deg);
|
|
|
|
}
|
|
|
|
|