Creating a Car Animation with HTML and CSS

 

In this blog post, we will create a simple car animation using HTML and CSS. This tutorial will guide you through the process and provide you with the source code.

Source Code

Below is the HTML and CSS code used for the car animation:

<!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>Car Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="car"><img src="car.png" alt="">
    <div class="head-light"></div></div>
    <div class="building"></div>
    <div class="road"></div>
</body>
</html>
/* style.css */
*{
    box-sizing:border-box;
    margin: 0;
    padding:0;
}
body{
    height: 100vh;
    background-color: skyblue;
    overflow:hidden;
    animation: sky 20s infinite linear;
}
@keyframes sky {
    0%{
        background-color: skyblue;
    }
     25%{
        background-color: rgb(7,7,17);
     }
     50%{
        background-color: rgb(7,7,17);
     }
}

.car img{
    width: 150px;
    position: absolute;
    bottom: 20vh;
    right: 40vh;
    animation: car 1s infinite linear;
}
@keyframes car {
    0%{
        transform: translate(2px,5px);
    }
    100%{
        transform: translate(1px, 6px);
    }
    
}
.road{
    width: 100%;
    height: 20vh;
    background-color: black;
    position: absolute;
    bottom:0;
}
.building{
    background: url(building.png);
    width: 100vw;
    height: 100vh;
    position: absolute;
    bottom: -10vh;
    z-index: -5;
    animation: building 10s infinite linear;

}
@keyframes building {
    0%{
        transform: translate(-100vw);
    }
    
    100%{
        transform: translate(100vw);
    }
}
.head-light{
    width: 200px;
    height: 20px;
    background-color: yellow;
    opacity: 0.8;
    position: absolute;
    bottom: 19vh;
    right: 60vh;
    transform: rotate(-15deg);
    z-index: -1;
    animation: light 20s infinite ease-in-out;
}
@keyframes light{
    0%{
        opacity: 0;
    }
    25%{
        opacity: 0.8;
    }
    50%{
        opacity: 0.8;
    }
    90%{
        opacity: 0.8;
    }
    100%{
        opacity: 0;
    }
}

Image Reference

Ensure that you have an image named car.png in the same directory as your HTML file. This image will be used for the car in the animation. Here is an example image:



View on GitHub

You can view and download the complete source code from our GitHub repository:

View on GitHub




Trending Posts

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Image
On your Computer Keyboard or Laptop keyboard, you always see F1 to F12 Function Keys, right. But, have you ever wondered what are these keys(F1 to F12) and their uses are? What are Function Keys? Function Keys are the keys that are on the top of the keyboard from F1 to F12 for performing different functions that make the use of the computer ease. Like for example, Function Key can be used to Refresh/Reload webpage or computer, saving the file, closing the window, etc. To Use Function Key On Laptop, you should press function keys with the 'fn' key which is on the bottom of your keyboard. What are the Uses of F1 To F12 Function Key? F1 Key: The F1 key is used to open the Help Center of the Application. For example, if you press the F1 key while using Chrome Browser, Google Chrome Help Center will open. F2 Key: The F2 key is used to Rename the file or folder on the computer quickly. Usually, to rename a file/folder, you right-click on it and click on rename to change its name, rig
Read More

When You Should Buy a New Smartphone? Right Time To Upgrade A Smartphone?

Image
If you are thinking to buy a new smartphone then, first of all, you should consider these points.      Right Time To Buy A New Smartphone   1.You are using your smartphone for more than 2 years. If you are using your smartphone for a long time and if some of the features are not working, then you should get a new phone. 2.No OS Updates After a couple of years, smartphone companies(not all the company) stop providing software updates. If you are not getting any software updates, then you must buy a new latest phone because OS Updates comes with new features and other bugs/problems fixes, security patches. 3.Camera Is Not Working If you love taking pictures and videos, then it must be your favorite feature of a smartphone. If your smartphone camera is damaged or if it is not working properly and if it doesn't have a lot of the latest features like slow-motion, night mode, EIS/OIS, 4K Recording, etc. then, you should buy a new camera-centric smartphone. 4.Lack of Storage and RAM To
Read More

How Long Does It Take to Learn Web Development?

Image
Web development is a fascinating and rewarding field, but one of the most common questions beginners ask is, "How long does it take to learn web development?" The answer isn't straightforward, as it depends on several factors including your prior experience, learning pace, and the depth of knowledge you wish to acquire. Let's break it down. The Basics: Getting Started with HTML, CSS, and JavaScript For complete beginners, the journey typically starts with understanding the fundamentals of web development. This includes learning: HTML (HyperText Markup Language) : The backbone of any web page. It usually takes a few weeks to become comfortable with HTML, as it involves learning how to structure content with elements like headings, paragraphs, and links. CSS (Cascading Style Sheets) : This is used to style and layout web pages. Mastery of CSS can take another few weeks to a couple of months. It involves understanding how to use
Read More

Computer Hardware and Software

Image
Table of Contents 1. Computer Hardware 1.1 Computer Hardware Types 1.1.1 Input Devices 1.1.2 Processing Devices 1.1.3 Output Devices 1.1.4 Memory and Storage Devices 2. Computer Software 2.1 Types of Computer Software 1. Computer Hardware 1.1 Computer Hardware Types Computer hardware refers to the physical components that make up a computer system. These components are essential for the system to function and interact with software. 1.1.1 Input Devices Input devices allow users to provide data and commands to the computer. Some common input devices include: Keyboard: Used for typing text and commands. Mouse: A pointing device used to interact with
Read More

Sunrise And Sunset Animation Using HTML & CSS?

Image
HTML Code <html lang="en"> <head>     <meta charset="UTF-8"></meta>     <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>     <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>     <title>Sunrise and Sunset</title>     <link href="style.css" rel="stylesheet"></link> </head> <body>     <div id="sun"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div id="land"></div> </body> </html> CSS Code *{ box-sizing: border-box; margin: 0; padding:0; } body{ background-color: rgb(154,209,253);
Read More

Recent CrowdStrike Update Causes Big Tech Outage: What Happened and What We Can Learn

Image
In mid-July 2024, many businesses around the world experienced significant IT issues due to a problematic update from CrowdStrike, a leading cybersecurity company. Here's a breakdown of what happened, how it affected various industries, and what we can learn from this incident. What Happened? On July 18, 2024, CrowdStrike rolled out an update to its Falcon agent. Almost immediately, users started reporting major problems. Systems were rebooting unexpectedly, and connectivity issues were rampant. This was especially problematic for Microsoft-based customers who rely on CrowdStrike for cybersecurity. Who Was Affected? The update's impact was widespread. Major airlines like American Airlines, Delta, and United faced disruptions. The UK's National Health Service (NHS) also reported issues, which could have serious implications given the critical nature of their services. Even banks and financial institutions weren't spared, highlighting how a single update can affec
Read More

5 Mistakes You Should Never Do On The Internet

Image
Internet is a boon for us. We can communicate with our friends from anywhere around the world, learning anything we want, etc. Many people use the Internet. But, They don't use it properly.  Here Are Some of The Things You Should Stop Doing On The Internet: 1.Downloading Files/Apps From Unknown Sources You should not download any files/apps from unknown sources because they can contain a virus and malicious files that will harm your computer. First of all, Verify if the site or AppStore is safe or not to download files. If it is safe, Then You Can Download files from there. If it is not, Then don't download any files from those unknown sources. 2.Sharing Personal and Confidential Information On HTTP Sites If you check the URL of any site, then you will see two things. They are: (HTTP and HTTPS). If you are visiting any HTTP site then never share your personal information like your account passwords, Your Details, etc because it is not encrypted. Your data can be easily hacked
Read More

OPPO New Rollable Smartphone - OPPO X 2021

Image
  We have seen a foldable phone which folds and becomes into a smartphone and after unfolding, it becomes like a tablet. But, OPPO has made a new innovative Rollable Smartphone. The smartphone display can be rolled and convert into a tablet as well as a smartphone. OPPO has used a motor and flexible display to make this innovative smartphone. The flexible OLED display rolls inside and outside the smartphone after pressing or sliding on the power. OPPO also said this smartphone can be rolled 100,000 times which is good for long-term uses of the smartphone. Although it is officially not launched in the market. But, we will soon see this type of rollable smartphone in the future. Advantages And Disadvantages: OPPO X 2021 has advantages over foldable phones like the screen does not get crease like other foldable phones and it has also some disadvantages like the dust can easily get inside the smartphone because of the rollable display, since it has a motor and rollable display it is diffic
Read More

Starting Secure: Essential Data Protection Tips for New Entrepreneurs

Image
As you embark on your entrepreneurial journey, safeguarding customer data is a critical foundation for trust and compliance. By embedding robust data security measures from the outset, you protect your business from potential threats and build a strong relationship with your customers based on reliability and integrity. The following practices, courtesy of SmartTechTips , will guide you in creating a secure environment for your business’s sensitive data. Encrypt Your Data Implement robust encryption protocols to secure customer data effectively. This method encodes information, making it accessible only to those with the decryption keys. Encryption ensures the information remains protected from unauthorized access even during a data breach. Adopting strong encryption standards is a proactive step toward maintaining confidentiality and security. Control Access Limiting data access to authorized personnel is crucial for minimizing the risk of internal breaches. Implement access
Read More

5 Awesome Computer Shortcut Key Tricks You Must Try

Image
  A computer is a cool machine. You can do lots of stuff on it. You can even become cooler after knowing these 5 Short Cut Key tricks given below. Minimize All Open Windows/Program At Once If you are in hurry and want to minimize all the open programs on your computer at once. Then, you should press the Win+D key from your keyboard. After this, all the open programs will minimize. You can maximize all the programs again by pressing the same key combination Win+D . Open Windows Settings Quickly There is also one shortcut key to open Windows OS Settings. If you press the Win+I key from your keyboard the Settings will open. Shut Down Your Computer Quickly Many people usually shut down their computer using a mouse. But, there is also a shortcut key to shut down the computer real quick. If you press the Alt+F4+Enter key your computer will shut down. Lock Your Computer If you press the Win+L key from your keyboard your computer will be locked. This shortcut key is one of the useful shortc
Read More