Animation In HTML and CSS
Moving Car Animation using HTML and CSS || 2020
For Images :--
https://drive.google.com/drive/folders/1k5qvCKtxhjzbUwVzflYnqImWd6CsudZE?usp=sharing
Source Code :-
HTML :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Car</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="sky">
<div class="road">
<img src="road.png" alt="">
</div>
<div class="cloud">
<img src="cloud.png" alt="">
</div>
<div class="city"></div>
<div class="car">
<img src="car.png" alt="">
</div>
<div class="wheel">
<div class="wheel1 front">
<img src="wheel.png" alt="">
</div>
<div class="wheel1 back">
<img src="wheel.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
CSS :--
*{
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
.sky{
height: 100vh;
width: 100%;
background-image: url(sky.jpg);
background-repeat: no-repeat;
position: absolute;
background-size: cover;
overflow-x: hidden;
}
.road{
height: 300px;
width: 500%;
display: block;
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
background-repeat: repeat-x;
animation: road 3s linear infinite;
}
@keyframes road{
100%{
transform: translateX(-3400px);
}
}
.car{
width: 450px;
left: 30%;
bottom: 30px;
transform: translateX(-50%);
position: absolute;
z-index: 2;
}
.car img{
width: 240%;
}
.wheel{
left: 52%;
bottom: 195px;
transform: translateX(-50%);
position: absolute;
z-index: 2;
}
.wheel1 img{
height: 135px;
width: 135px;
animation: wheel 0.6s linear infinite;
}
@keyframes wheel{
100%{
transform: rotate(360deg);
}
}
.front{
position: absolute;
left: 185px;
top: 20px;
}
.back{
position: absolute;
left: -336px;
top: 3px;
}
.back img{
height: 140px;
width: 140px;
}
.city{
height: 650px;
width: 500%;
position: absolute;
bottom: -135px;
left:0;
right: 0;
display: block;
z-index: 1;
animation: speed 20s linear infinite;
background-image: url(city3.png);
}
@keyframes speed{
100%{
transform: translateX(-1417px);
}
}
.cloud img{
height: 100%;
width: 100%;
margin-left: 100%;
background-repeat: repeat-x;
animation: clouds 25s linear infinite;
}
@keyframes clouds{
0%{
opacity: 0;
}
100%{
transform: translateX(-2350px);
}
}
Comments
Post a Comment