RUNNING CAR ANIMATION.
Hey programmer see our new web project RUNNING CAR ANIMATION . we hope you will really appreciate us for such amazing programming . We also urge you to run this program on your device then see such amazing output.
PROGRAM SOURCE CODE :)
1) HTML Coding : -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="car.png">
<title>Moving Car Animation</title>
<link rel="stylesheet" type="text/css" href="Car_Animation.css">
</head>
<body onload="carsoundplay()">
<audio src="carSound.mp3" controls loop></audio>
<div class="main">
<div class="road"></div>
<div class="city"></div>
<div class="car">
<img src="car1.png">
</div>
<div class="wheel">
<img src="wheel1.png" class="bwheel">
<img src="wheel1.png" class="fwheel">
</div>
</div>
<script type="text/javascript">
const carsoundplay = ()=>{
const music = document.querySelector('audio');
music.play();
};
</script>
</body>
</html>
2) CSS Coding : -
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main{
height: 100vh;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.road{
height: 120px;
width: 300vw;
display: block;
background-image: url("1.jpg");
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background-repeat: repeat-x;
animation: mr 5s linear infinite;
}
@keyframes mr{
100%{
transform: translateX(-150vw);
}
}
.city{
height: 100vh;
width: 300vw;
background-image: url("city.png");
background-size: cover;
background-position: center;
position: absolute;
left: 0;
right: 0;
bottom: 80px;
display: block;
z-index: 1;
background-repeat: repeat-x;
animation: mr 2s linear infinite;
}
@keyframes mr{
100%{
transform: translateX(-150vw);
}
}
.car{
width: 400px;
left: 30%;
bottom: 40px;
transform: translateX(-50%);
position: absolute;
z-index: 3;
}
.car img{
width: 100%;
animation: ud 1s linear infinite;
}
@keyframes ud{
0%{
transform: translateY(-1px);
}
50%{
transform: translateY(1px);
}
100%{
transform: translateY(-1px);
}
}
.wheel{
left: 30%;
bottom: 165px;
transform: translateX(-50%);
position: absolute;
z-index: 3;
}
.wheel img{
width:100px;
height:100px;
animation:rw 0.3s linear infinite;
}
.fwheel{
position: absolute;
left: -180px;
}
.bwheel{
position: absolute;
left: 80px;
}
@keyframes rw{
100%{
transform: rotate(360deg);
}
}
audio{
display: none;
}
