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>Game Character</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Cool programming projects -->
<div class="primary_container">
<div class="first_container secondary_container">
<div class="character_box " id="character_box"></div>
</div>
<div class="second_conatiner secondary_container">
<button id="action1" onclick="action1()">Action-1</button>
<button id="action2" onclick="action2()">Action-2</button>
<button id="action3" onclick="action3()">Action-3</button>
<button id="stop" onclick="stop()">Stop</button>
<button id="resume" onclick="resume()">Resume</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS CODE
*{
padding:0;
margin:0;
}
body{
background-color: rgb(194, 194, 194);
overflow: hidden;
width:100%;
font-family:sans-serif;
height:100vh;
background:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(img/bk1.jpg)no-repeat center center/cover;
}
button{
padding:5px 10px;
width:200px;
height:50px;
text-transform: uppercase;
margin:10px;
letter-spacing: 2px;
border-radius: 30px;
font-weight: 500;
border: 1px solid black;
background-color: rgb(221, 221, 0);
font-size: 20px;
}
button:active{
background-color: yellow;
}
.primary_container{
position: relative;
width:100%;
height:100%;
display: flex;
justify-content:space-around;
align-items: center;
}
.secondary_container{
position: relative;
justify-content: center;
align-items: center;
display: flex;
background-color: rgb(194, 194, 194);
border-radius: 10px;
}
.first_container{
width:400px;
height:500px;
background-color: transparent;
position: relative;
left:100px;
}
.second_conatiner{
width:700px;
height:500px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: transparent;
}
.character_box{
width:157px;
height:264px;
background-image: url(img/action1.png);
}
.action1{
width:157px;
height:264px;
background-image: url(img/action1.png);
animation: action1 1s steps(6) infinite ;
}
@keyframes action1 {
100%{
background-position: -946px;
}
}
.action2{
width:268px;
height:155px;
background-image: url(img/action2.png);
animation: action2 1s steps(6) infinite,action2_move 2s linear infinite alternate ;
}
@keyframes action2 {
100%{
background-position: 1608px;
}
}
@keyframes action2_move {
0%{
transform: translateX(-20px);
}
100%{
transform: translateX(20px);
}
}
.action3{
width:183px;
height:226px;
background-image: url(img/action3.png);
animation: action3 1s steps(6) infinite;
}
@keyframes action3 {
100%{
background-position: -1102px;
}
}
JAVASCRIPT CODE
var character_box=document.getElementById('character_box');
function action2(){
character_box.classList.add('action2');
character_box.classList.remove('action1');
character_box.classList.remove('action3');
}
function action1(){
character_box.classList.add('action1');
character_box.classList.remove('action2');
character_box.classList.remove('action3');
}
function action3(){
character_box.classList.add('action3');
character_box.classList.remove('action2');
character_box.classList.remove('action1');
}
function stop(){
character_box.style.animationPlayState='paused';
}
function resume(){
character_box.style.animationPlayState='running';
}
RESOURCES
Post a Comment