Design a running car animation using HTML and CSS - GeeksforGeeks

28 Dec, 2020
Project Introduction: In this project, we are going to implement a car running on a track using HTML and CSS with sound effects. The prerequisites of this project are HTML, CSS, and JavaScript.
File structure:
index.html
style.css
script.js
HTML code:  In the following code, we have placed the sky div in such a way that it covers the whole webpage. After that, the tree, track, car are put over the sky and finally, the wheels are fitted in the car so that they can rotate, and we can create an animation for a running car. We have added the styles using the file style.css and applied the sound effects from script.js.
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content=      "width=device-width, initial-scale=1.0">    <title>Lamborghini car animation</title>    <link rel="stylesheet" href="style.css">    <script src="script.js"></script></head><body>    <div class="sky">        <div class="tree"></div>        <div class="track"></div>        <div class="car"></div>        <div class=" wheel wheel1"></div>        <div class="wheel wheel2"></div>    </div></body></html>
style.css: The following is the code for file “style.css” which is used in the above HTML code.
/* CSS Reset */
*{
    margin: 0;
    padding: 0;
}

/* Sky Styling */
.sky {
    width: 100vw;
    height: 100vh;
    background-image: url(sky.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
}

/* Tree Styling and positioning */
.tree {
    height: 100vh;
    background-image: url(tree-removebg-preview\ \(1\).png);
    background-repeat:no-repeat;
    background-size: cover;
}

/* Track Styling and positioning */
.track {
    background-image: url(track.jpeg);
    background-repeat: repeat-x;
    position: absolute;
    bottom: 0px;
    width: 1000vw;
    height: 20vh;
    animation: trackanimation 6s linear infinite;
}

/* Car Styling and positioning */
.car {
    background-image: url(car-removebg-preview.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 17rem;
    height: 4.699rem;
    position: absolute;
    bottom: 77px;
    left: 396px;
}

/* Wheel's Styling and positioning */
.wheel {
    position: absolute;
    animation: wheelanimation linear .6s infinite;
}
.wheel1 {
    background-image: url(wheel1-removebg-preview.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 46px;
    height: 49px;
    bottom: 71px;
    left: 570px;
}
.wheel2 {
    background-image: url(wheel2-removebg-preview.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 43px;
    height: 44px;
    bottom: 77px;
    left: 433px;
}

/* Rotation of the wheels */
@keyframes wheelanimation{
    100% {
        transform: rotate(360deg);
    }
}

/* Moving the track backwards */
@keyframes trackanimation {
    100% {
        transform: translate(-500vw);
    }
}
Explanation:
sky: We have placed the sky such that it covers the full viewport by assigning it 100vw and 100vh and we have set the position to absolute.
tree: We have positioned the tree such that it occupies the bottom of the webpage by using position: absolute property.
track: We have positioned the track to the bottom of the webpage, and we have repeated the track in the x-direction such that it always remains visible in the animation. We have also assigned a very large width to the track too for the same purpose. Now, the animation applied to the track moves the track in the backward direction such that it appears that the car is moving.
car, wheel: We have positioned the car and its wheels to their desired positions first and then made the wheels rotate by applying proper animation to it as given in the code above.
script.js: The following is the code for script.js file used in the above HTML file. This file is basically for applying the desired sound effects.
var aud=document.createElement('audio');
aud.setAttribute('src','sound.mp4');
aud.loop=true;
aud.play();
Output:
Source code link: https://github.com/SAEb-ai/Racing-Car-Animation
Output link: https://drive.google.com/file/d/18rT4MxajPJXjlscsjbMaVxVkihGavGQh/view?usp=drivesdk
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)