Sea battle game only using HTML and CSS
Where In this game we will build the game using only HTML and CSS tags and we do not use any javascript on this project
Lets start with the first step
step 1: Create a basic HTML format by using HTML tags with body tags and so on , create index.html file and paste the content in the files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//content goes on
</body>
</html>
Step 2: For battle sea war we will create HTML tags for first were in this tags contains the sea images using HTML and also contains the light in the images.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="ag-sea-battle">
<div class="ag-sea_box">
<div class="ag-sea_ship ag-sea_ship__command-ship"></div>
<div class="ag-sea_ship ag-sea_ship__heavy-cruiser"></div>
<div class="ag-sea_ship ag-sea_ship__command-revert"></div>
<div class="ag-sea_ship ag-sea_ship__heavy-revert"></div>
<div class="ag-sea_aircraft ag-sea_aircraft__left"></div>
<div class="ag-sea_aircraft ag-sea_aircraft__right"></div>
</div>
<div class="ag-format-container">
<div class="ag-sea_runway">
<div class="ag-sea_light"></div>
<div class="ag-sea_light"></div>
<div class="ag-sea_light"></div>
<div class="ag-sea_light"></div>
</div>
</div>
</div>
</body>
</html>
Step 3: Link a css tags for the html to add background images and animations etc for the html tags, Create style.css files and link to the html tags
html code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="ag-sea-battle">
<div class="ag-sea_box">
<div class="ag-sea_ship ag-sea_ship__command-ship"></div>
<div class="ag-sea_ship ag-sea_ship__heavy-cruiser"></div>
<div class="ag-sea_ship ag-sea_ship__command-revert"></div>
<div class="ag-sea_ship ag-sea_ship__heavy-revert"></div>
<div class="ag-sea_aircraft ag-sea_aircraft__left"></div>
<div class="ag-sea_aircraft ag-sea_aircraft__right"></div>
</div>
<div class="ag-format-container">
<div class="ag-sea_runway">
<div class="ag-sea_light"></div>
<div class="ag-sea_light"></div>
<div class="ag-sea_light"></div>
<div class="ag-sea_light"></div>
</div>
</div>
</div>
</body>
</html>
Step 4: Add the design in the style.css where in this add the images background and animations for their images in the CSS tags
style.css
.ag-format-container {
width: 1142px;
margin: 0 auto;
}
html,
body {
height: 100%;
overflow: hidden;
}
.ag-sea-battle {
height: 100%;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/bg.jpg) no-repeat scroll 50% 0;
background-size: cover;
}
.ag-sea_box {
padding: 200px 0 0;
position: relative;
}
.ag-sea_ship {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ag-sea_ship.ag-sea_ship__command-ship {
height: 5.0625em;
width: 23.9375em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/ship-left.png) 100% 100% no-repeat;
background-size: 100% 100%;
top: 90%;
left: 30%;
-webkit-transform: translate(-50%, -50%) scaleX(-1);
-moz-transform: translate(-50%, -50%) scaleX(-1);
-ms-transform: translate(-50%, -50%) scaleX(-1);
-o-transform: translate(-50%, -50%) scaleX(-1);
transform: translate(-50%, -50%) scaleX(-1);
-webkit-animation: an-go-command 7s ease-in-out forwards;
-moz-animation: an-go-command 7s ease-in-out forwards;
-o-animation: an-go-command 7s ease-in-out forwards;
animation: an-go-command 7s ease-in-out forwards;
}
.ag-sea_ship.ag-sea_ship__command-ship::after {
content: "";
height: 4.9375em;
width: 4.97656em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/flame.png) 0 100% no-repeat;
background-size: auto 100%;
opacity: 0;
position: absolute;
top: 30%;
left: 70%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-command-burns 2s steps(7, start) 7s infinite;
-moz-animation: an-command-burns 2s steps(7, start) 7s infinite;
-o-animation: an-command-burns 2s steps(7, start) 7s infinite;
animation: an-command-burns 2s steps(7, start) 7s infinite;
}
@keyframes an-command-burns {
0% {
opacity: 1;
}
100% {
opacity: 1;
background-position: 100% 100%;
}
}
.ag-sea_ship.ag-sea_ship__command-ship::before {
content: "";
height: 3.75em;
width: 3.75em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/smoke.png) 0 100% no-repeat;
background-size: auto 100%;
opacity: 0;
position: absolute;
top: 20%;
left: 71%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-smoke-command 3s steps(15, start) 7s infinite;
-moz-animation: an-smoke-command 3s steps(15, start) 7s infinite;
-o-animation: an-smoke-command 3s steps(15, start) 7s infinite;
animation: an-smoke-command 3s steps(15, start) 7s infinite;
}
@keyframes an-smoke-command {
0% {
opacity: 1;
}
100% {
opacity: 1;
background-position: 100% 100%;
}
}
@-webkit-keyframes an-go-command {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
50% {
-webkit-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
}
100% {
top: 100%;
left: 35%;
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
}
@-moz-keyframes an-go-command {
0% {
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
50% {
-moz-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
}
100% {
top: 100%;
left: 35%;
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
}
@-o-keyframes an-go-command {
0% {
-o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
50% {
-o-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
}
100% {
top: 100%;
left: 35%;
-o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
}
@keyframes an-go-command {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
-o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
50% {
-webkit-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
-moz-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
-o-transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(2deg) scaleX(-1);
}
100% {
top: 100%;
left: 35%;
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
-o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
}
.ag-sea_ship.ag-sea_ship__command-revert {
height: 5.0625em;
width: 23.9375em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/ship-left.png) 100% 100% no-repeat;
background-size: 100% 100%;
opacity: 0.3;
top: 125%;
left: 30%;
-webkit-transform: translate(-50%, -50%) scale(-1, -1);
-moz-transform: translate(-50%, -50%) scale(-1, -1);
-ms-transform: translate(-50%, -50%) scale(-1, -1);
-o-transform: translate(-50%, -50%) scale(-1, -1);
transform: translate(-50%, -50%) scale(-1, -1);
-webkit-animation: an-go-command_rev 7s ease-in-out forwards;
-moz-animation: an-go-command_rev 7s ease-in-out forwards;
-o-animation: an-go-command_rev 7s ease-in-out forwards;
animation: an-go-command_rev 7s ease-in-out forwards;
}
.ag-sea_ship.ag-sea_ship__command-revert::after {
content: "";
height: 4.9375em;
width: 4.97656em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/flame.png) 0 100% no-repeat;
background-size: auto 100%;
opacity: 0;
position: absolute;
top: 30%;
left: 70%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-command-burns 2s steps(7, start) 7s infinite;
-moz-animation: an-command-burns 2s steps(7, start) 7s infinite;
-o-animation: an-command-burns 2s steps(7, start) 7s infinite;
animation: an-command-burns 2s steps(7, start) 7s infinite;
}
@keyframes an-command-burns {
0% {
opacity: 1;
}
100% {
opacity: 1;
background-position: 100% 100%;
}
}
.ag-sea_ship.ag-sea_ship__command-revert::before {
content: "";
height: 3.75em;
width: 3.75em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/smoke.png) 0 100% no-repeat;
background-size: auto 100%;
opacity: 0;
position: absolute;
top: 20%;
left: 71%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-smoke-command 3s steps(15, start) 7s infinite;
-moz-animation: an-smoke-command 3s steps(15, start) 7s infinite;
-o-animation: an-smoke-command 3s steps(15, start) 7s infinite;
animation: an-smoke-command 3s steps(15, start) 7s infinite;
}
@keyframes an-smoke-command {
0% {
opacity: 1;
}
100% {
opacity: 1;
background-position: 100% 100%;
}
}
@-webkit-keyframes an-go-command_rev {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
50% {
-webkit-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
}
100% {
top: 135%;
left: 35%;
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
}
@-moz-keyframes an-go-command_rev {
0% {
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
50% {
-moz-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
}
100% {
top: 135%;
left: 35%;
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
}
@-o-keyframes an-go-command_rev {
0% {
-o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
50% {
-o-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
}
100% {
top: 135%;
left: 35%;
-o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
}
@keyframes an-go-command_rev {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
-o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
50% {
-webkit-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
-moz-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
-o-transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(2deg) scale(-1, -1);
}
100% {
top: 135%;
left: 35%;
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
-o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
}
.ag-sea_ship.ag-sea_ship__heavy-cruiser {
height: 4.125em;
width: 15.875em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/ship-right.png) 100% 100% no-repeat;
background-size: 100% 100%;
top: 90%;
left: 70%;
-webkit-transform: translate(-50%, -50%) scaleX(-1);
-moz-transform: translate(-50%, -50%) scaleX(-1);
-ms-transform: translate(-50%, -50%) scaleX(-1);
-o-transform: translate(-50%, -50%) scaleX(-1);
transform: translate(-50%, -50%) scaleX(-1);
-webkit-animation: an-go-heavy 7s ease-in-out forwards;
-moz-animation: an-go-heavy 7s ease-in-out forwards;
-o-animation: an-go-heavy 7s ease-in-out forwards;
animation: an-go-heavy 7s ease-in-out forwards;
}
.ag-sea_ship.ag-sea_ship__heavy-cruiser::after {
content: "";
height: 4.9375em;
width: 4.97656em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/flame.png) 0 100% no-repeat;
background-size: auto 100%;
opacity: 0;
position: absolute;
top: 20%;
left: 35%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
-moz-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
-o-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
animation: an-heavy-burns 2s steps(7, start) 7s infinite;
}
@keyframes an-heavy-burns {
0% {
opacity: 1;
}
100% {
opacity: 1;
background-position: 100% 100%;
}
}
.ag-sea_ship.ag-sea_ship__heavy-cruiser::before {
content: "";
height: 3.75em;
width: 3.75em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/smoke.png) 0 100% no-repeat;
background-size: auto 100%;
opacity: 0;
position: absolute;
top: 0;
left: 37%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
-moz-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
-o-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
}
@keyframes an-smoke-heavy {
0% {
opacity: 1;
}
100% {
opacity: 1;
background-position: 100% 100%;
}
}
@-webkit-keyframes an-go-heavy {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
50% {
-webkit-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
}
100% {
top: 100%;
left: 60%;
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
}
@-moz-keyframes an-go-heavy {
0% {
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
50% {
-moz-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
}
100% {
top: 100%;
left: 60%;
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
}
@-o-keyframes an-go-heavy {
0% {
-o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
50% {
-o-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
}
100% {
top: 100%;
left: 60%;
-o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
}
@keyframes an-go-heavy {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
-o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
50% {
-webkit-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
-moz-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
-o-transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(-2deg) scaleX(-1);
}
100% {
top: 100%;
left: 60%;
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
-o-transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
transform: translate(-50%, -50%) rotateZ(0deg) scaleX(-1);
}
}
.ag-sea_ship.ag-sea_ship__heavy-revert {
height: 4.125em;
width: 15.875em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/ship-right.png) 100% 100% no-repeat;
background-size: 100% 100%;
opacity: 0.3;
top: 118%;
left: 70%;
-webkit-transform: translate(-50%, -50%) scale(-1, -1);
-moz-transform: translate(-50%, -50%) scale(-1, -1);
-ms-transform: translate(-50%, -50%) scale(-1, -1);
-o-transform: translate(-50%, -50%) scale(-1, -1);
transform: translate(-50%, -50%) scale(-1, -1);
-webkit-animation: an-go-heavy_rev 7s ease-in-out forwards;
-moz-animation: an-go-heavy_rev 7s ease-in-out forwards;
-o-animation: an-go-heavy_rev 7s ease-in-out forwards;
animation: an-go-heavy_rev 7s ease-in-out forwards;
}
.ag-sea_ship.ag-sea_ship__heavy-revert::after {
content: "";
height: 4.9375em;
width: 4.97656em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/flame.png) 0 100% no-repeat;
background-size: auto 100%;
opacity: 0;
position: absolute;
top: 20%;
left: 35%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
-moz-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
-o-animation: an-heavy-burns 2s steps(7, start) 7s infinite;
animation: an-heavy-burns 2s steps(7, start) 7s infinite;
}
@keyframes an-heavy-burns {
0% {
opacity: 1;
}
100% {
opacity: 1;
background-position: 100% 100%;
}
}
.ag-sea_ship.ag-sea_ship__heavy-revert::before {
content: "";
height: 3.75em;
width: 3.75em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/smoke.png) 0 100% no-repeat;
background-size: auto 100%;
opacity: 0;
position: absolute;
top: 0;
left: 37%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
-moz-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
-o-animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
animation: an-smoke-heavy 3s steps(15, start) 7s infinite;
}
@keyframes an-smoke-heavy {
0% {
opacity: 1;
}
100% {
opacity: 1;
background-position: 100% 100%;
}
}
@-webkit-keyframes an-go-heavy_rev {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
50% {
-webkit-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
}
100% {
top: 128%;
left: 60%;
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
}
@-moz-keyframes an-go-heavy_rev {
0% {
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
50% {
-moz-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
}
100% {
top: 128%;
left: 60%;
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
}
@-o-keyframes an-go-heavy_rev {
0% {
-o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
50% {
-o-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
}
100% {
top: 128%;
left: 60%;
-o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
}
@keyframes an-go-heavy_rev {
0% {
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
-o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
50% {
-webkit-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
-moz-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
-o-transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(-2deg) scale(-1, -1);
}
100% {
top: 128%;
left: 60%;
-webkit-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
-moz-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
-o-transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
transform: translate(-50%, -50%) rotateZ(0deg) scale(-1, -1);
}
}
.ag-sea_aircraft {
height: 1.5625em;
width: 2.8125em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/aircraft.png) 100% 100% no-repeat;
background-size: 100% 100%;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotateZ(15deg);
-moz-transform: translate(-50%, -50%) rotateZ(15deg);
-ms-transform: translate(-50%, -50%) rotate(15deg);
-o-transform: translate(-50%, -50%) rotateZ(15deg);
transform: translate(-50%, -50%) rotateZ(15deg);
}
.ag-sea_aircraft.ag-sea_aircraft__left {
top: 50%;
left: -5%;
-webkit-animation: an-fly-air-1 7s linear forwards;
-moz-animation: an-fly-air-1 7s linear forwards;
-o-animation: an-fly-air-1 7s linear forwards;
animation: an-fly-air-1 7s linear forwards;
}
.ag-sea_aircraft.ag-sea_aircraft__left::after {
content: "";
height: 2.125em;
width: 2.125em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/bang.png) 0 100% no-repeat;
background-size: auto 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
-moz-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
-o-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
animation: an-bang-air 1s steps(24, start) 6.8s forwards;
}
@keyframes an-bang-air {
99.99% {
opacity: 1;
background-position: 100% 100%;
}
100% {
opacity: 0;
background-position: 100% 100%;
}
}
@-webkit-keyframes an-fly-air-1 {
0% {
left: -10%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
49.99% {
left: 110%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
50% {
left: 110%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
70% {
left: 75%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
99.99% {
opacity: 1;
top: 100%;
left: 62%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
}
100% {
opacity: 0;
top: 100%;
left: 62%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
}
}
@-moz-keyframes an-fly-air-1 {
0% {
left: -10%;
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
49.99% {
left: 110%;
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
50% {
left: 110%;
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
70% {
left: 75%;
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
99.99% {
opacity: 1;
top: 100%;
left: 62%;
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
}
100% {
opacity: 0;
top: 100%;
left: 62%;
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
}
}
@-o-keyframes an-fly-air-1 {
0% {
left: -10%;
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
49.99% {
left: 110%;
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
50% {
left: 110%;
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
70% {
left: 75%;
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
99.99% {
opacity: 1;
top: 100%;
left: 62%;
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
}
100% {
opacity: 0;
top: 100%;
left: 62%;
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
}
}
@keyframes an-fly-air-1 {
0% {
left: -10%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
49.99% {
left: 110%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
50% {
left: 110%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
70% {
left: 75%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
99.99% {
opacity: 1;
top: 100%;
left: 62%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
}
100% {
opacity: 0;
top: 100%;
left: 62%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(35deg);
}
}
.ag-sea_aircraft.ag-sea_aircraft__right {
top: 55%;
left: 105%;
-webkit-animation: an-fly-air-2 7s linear forwards;
-moz-animation: an-fly-air-2 7s linear forwards;
-o-animation: an-fly-air-2 7s linear forwards;
animation: an-fly-air-2 7s linear forwards;
}
.ag-sea_aircraft.ag-sea_aircraft__right::after {
content: "";
height: 2.125em;
width: 2.125em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/bang.png) 0 100% no-repeat;
background-size: auto 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
-moz-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
-o-animation: an-bang-air 1s steps(24, start) 6.8s forwards;
animation: an-bang-air 1s steps(24, start) 6.8s forwards;
}
@keyframes an-bang-air {
99.99% {
opacity: 1;
background-position: 100% 100%;
}
100% {
opacity: 0;
background-position: 100% 100%;
}
}
@-webkit-keyframes an-fly-air-2 {
0% {
left: 105%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
49.99% {
left: -5%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
50% {
left: -5%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
70% {
left: 10%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
99.99% {
opacity: 1;
top: 100%;
left: 31%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
}
100% {
opacity: 0;
top: 100%;
left: 31%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
}
}
@-moz-keyframes an-fly-air-2 {
0% {
left: 105%;
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
49.99% {
left: -5%;
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
50% {
left: -5%;
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
70% {
left: 10%;
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
99.99% {
opacity: 1;
top: 100%;
left: 31%;
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
}
100% {
opacity: 0;
top: 100%;
left: 31%;
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
}
}
@-o-keyframes an-fly-air-2 {
0% {
left: 105%;
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
49.99% {
left: -5%;
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
50% {
left: -5%;
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
70% {
left: 10%;
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
99.99% {
opacity: 1;
top: 100%;
left: 31%;
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
}
100% {
opacity: 0;
top: 100%;
left: 31%;
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
}
}
@keyframes an-fly-air-2 {
0% {
left: 105%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
49.99% {
left: -5%;
-webkit-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
-moz-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
-o-transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(-1) rotateZ(15deg);
}
50% {
left: -5%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
70% {
left: 10%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(15deg);
}
99.99% {
opacity: 1;
top: 100%;
left: 31%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
}
100% {
opacity: 0;
top: 100%;
left: 31%;
-webkit-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
-moz-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
-o-transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
transform: translate(-50%, -50%) scaleX(1) rotateZ(35deg);
}
}
.ag-sea_runway {
height: 7.3125em;
width: 11.25em;
margin-left: 4.375em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/launch-pad.png) 100% 100% no-repeat;
background-size: 100% 100%;
position: absolute;
left: 40%;
bottom: 10%;
}
.ag-sea_light {
height: 5.125em;
width: 6.6875em;
background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sea-battle/images/light.png) 100% 100% no-repeat;
background-size: 100% 100%;
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: an-light 1s ease-in-out infinite;
-moz-animation: an-light 1s ease-in-out infinite;
-o-animation: an-light 1s ease-in-out infinite;
animation: an-light 1s ease-in-out infinite;
}
.ag-sea_light:nth-child(odd) {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.ag-sea_light:nth-child(1) {
top: -25%;
left: 10%;
-webkit-transform: translate(-50%, -50%) scaleX(-1);
-moz-transform: translate(-50%, -50%) scaleX(-1);
-ms-transform: translate(-50%, -50%) scaleX(-1);
-o-transform: translate(-50%, -50%) scaleX(-1);
transform: translate(-50%, -50%) scaleX(-1);
}
.ag-sea_light:nth-child(2) {
top: -25%;
left: 115%;
}
.ag-sea_light:nth-child(3) {
top: 55%;
left: 95%;
}
.ag-sea_light:nth-child(4) {
top: 55%;
left: -15%;
-webkit-transform: translate(-50%, -50%) scaleX(-1);
-moz-transform: translate(-50%, -50%) scaleX(-1);
-ms-transform: translate(-50%, -50%) scaleX(-1);
-o-transform: translate(-50%, -50%) scaleX(-1);
transform: translate(-50%, -50%) scaleX(-1);
}
@-webkit-keyframes an-light {
50% {
opacity: 0;
}
}
@-moz-keyframes an-light {
50% {
opacity: 0;
}
}
@-o-keyframes an-light {
50% {
opacity: 0;
}
}
@keyframes an-light {
50% {
opacity: 0;
}
}
@media only screen and (max-width: 767px) {
.ag-format-container {
width: 96%;
}
}
@media only screen and (max-width: 639px) {}
@media only screen and (max-width: 479px) {}
@media (min-width: 768px) and (max-width: 979px) {
.ag-format-container {
width: 750px;
}
}
@media (min-width: 980px) and (max-width: 1161px) {
.ag-format-container {
width: 960px;
}
}
At last, we will get the output for sea battle game animation like this:
Happy coding atutorialhub.com......
Leave a Comment