de_tank v2

master
orphevs 2017-12-09 00:44:51 +01:00
parent bbac68a1ea
commit 0d954a188b
3 changed files with 252 additions and 55 deletions

View File

@ -3,6 +3,7 @@ body{
padding: 0; padding: 0;
font-family: sans-serif; font-family: sans-serif;
background: #232323; background: #232323;
user-select: none;
} }
.header{ .header{
@ -17,57 +18,32 @@ body{
color: #fff; color: #fff;
} }
.container{
max-width: 1140px;
margin: auto;
}
.map{ .map{
width: 1170px; text-align: center;
height: 460px;
border: solid 3px #000;
background: url(../img/bg_sand.png) repeat; background: url(../img/bg_sand.png) repeat;
position: absolute; display: inline-block;
left: 0; padding-top: 7px;
right: 0; padding-bottom: 3px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
} }
.tank1{ .line{
height: 36px; display: inline-block;
width: 70px;
background: url(../img/tank_green.png) no-repeat;
position: absolute;
border: solid 1px red;
} }
.tank2{ .col{
height: 36px; height: 50px;
width: 70px; width: 50px;
background: url(../img/tank_orange.png) no-repeat; border: solid 0px #000;
position: absolute; display: inline-block;
left: 50px;
top: 100px;
display: none;
} }
.bullet{ .line-3 > .col-12{
height: 6px; background: url(../img/tank_bg.png) no-repeat;
width: 6px; background-position: 0px 0px;
background: #fff;
position: absolute;
left: 70px;
top: 15px;
} }
.directionLeft{
transform: rotate(180deg);
}
.directionRight{
transform: rotate(0deg);
}
.directionUp{
transform: rotate(-90deg);
}
.directionDown{
transform: rotate(90deg);
}

BIN
assets/img/tank_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -1,20 +1,241 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>de_tank</title> <title>de_tank</title>
<link rel="stylesheet" href="./assets/css/style.css"> <link rel="stylesheet" href="./assets/css/style.css">
</head> </head>
<body> <body>
<section class="header"> <section class="header">
<h1>de_tank</h1> <h1>de_tank</h1>
</section> </section>
<section class="map"> <div class="container">
<div class="tank1"> <section class="map">
<div class="bullet"></div> <div class="line line-1">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-2">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-3">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-4">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-5">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-6">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-7">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-8">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-9">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
<div class="line line-10">
<div class="col col-1"></div>
<div class="col col-2"></div>
<div class="col col-3"></div>
<div class="col col-4"></div>
<div class="col col-5"></div>
<div class="col col-6"></div>
<div class="col col-7"></div>
<div class="col col-8"></div>
<div class="col col-9"></div>
<div class="col col-10"></div>
<div class="col col-11"></div>
<div class="col col-12"></div>
<div class="col col-13"></div>
<div class="col col-14"></div>
<div class="col col-15"></div>
<div class="col col-16"></div>
<div class="col col-17"></div>
<div class="col col-18"></div>
<div class="col col-19"></div>
<div class="col col-20"></div>
</div>
</section>
</div> </div>
<div class="tank2"></div>
</section>
</body> </body>
<script src="assets/js/script.js"></script> <script src="assets/js/script.js"></script>
</html> </html>