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;
}