Car Animation By Using HTML,CSS And JavaScript:
HTML:
_________________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>City Roads</title>
</head>
<body>
<div class="container">
<div class="birds">
<img src="car.png" height="200px" width="200px" id="car"/>
<img src="trafic.png" height="250px" width="250px" id="trafic"/>
<div class="di">
<div class="divs"></div>
<div class="divs"></div>
<div class="divs"></div>
</div>
</div>
</div>
<script>
var car=document.getElementById("car");
//car.onclick=function(){
var lights=document.getElementsByClassName("divs");
lights[2].style.background="none";
var position=0;
var id=setInterval(frame,4);
function lightning(){
lights[0].style.background="none";
lights[2].style.background="black";
}
function frame(){
if(position==950){
lightning();
clearInterval(id);
}
else{
position++;
car.style.left=position+'px';
}
}
//}
</script>
</body>
</html>
CSS:
________________________________________________________________________________
body{
margin:0px;
padding:0px;
background-image:url("road.jpg");
background-repeat:no-repeat;
background-size:100% 680px;
}
.main-container{
}
.fix{
width:100%;
height:50px;
background-color:black;
margin-top:-100px;
}
#car{
float:left;
position:relative;
top:440px;
left:0px;
}
#trafic{
float:right;
position:relative;
top:340px;
left:50px;
}
.divs{
position:relative;
left:1180px;
top:390px;
height:18px;
width:18px;
background-color:black;
border-radius:30px;
margin-top:1px;
}
_________________________________________________________________________________
0 Comments