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
.png)
