Animate Trucks On the Road by This Programming
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Road Animation</title>
<link href="style.css" media="all" rel="stylesheet">
</head>
<body>
<div class="road">
<div class="blue_truck">
<div class="blue_truck_rim_one"></div>
<div class="blue_truck_rim_two"></div>
</div>
<div class="green_truck">
<div class="green_truck_rim_one"></div>
<div class="green_truck_rim_two"></div>
</div>
</div>
<div class="bottom-grass"></div>
</body>
</html>
CSS Code
body {
margin: 0;
padding: 0;
}
.road {
background: url(https://phemanpeniel.com/wp-content/uploads/2020/05/view-landscape-white-long-asphalt-blue_1417-945.jpg) bottom no-repeat;
background-size: cover;
width: 100%;
max-width: 1360px;
height: 694px;
margin: 0 auto;
overflow: hidden;
}
.blue_truck {
background: url(images/blue-truck.png) no-repeat center center;
height: 105px;
width: 235px;
position: relative;
top: 58%;
animation-name: blue_truck;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes blue_truck {
0% {
left: -100%;
}
50% {
left: 0;
}
100% {
left: 100%;
}
}
.blue_truck .blue_truck_rim_one,
.blue_truck .blue_truck_rim_two {
background: url(images/truck-rim.png) no-repeat center center;
background-size: cover;
height: 18px;
width: 18px;
position: absolute;
top: 75%;
animation-name: blue_truck_rim;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.blue_truck .blue_truck_rim_one {
left: 23%;
}
@keyframes blue_truck_rim {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.blue_truck .blue_truck_rim_two {
left: 75%;
}
.green_truck {
background: url(images/green-truck.png) no-repeat center center;
height: 93px;
width: 235px;
position: relative;
top: 68%;
animation-name: green_truck;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes green_truck {
0% {
right: -100%;
}
50% {
right: 0;
}
100% {
right: 100%;
}
}
.green_truck .green_truck_rim_one,
.green_truck .green_truck_rim_two {
background: url(images/truck-rim.png) no-repeat center center;
background-size: cover;
height: 18px;
width: 18px;
position: absolute;
top: 75%;
animation-name: green_truck_rim;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.green_truck .green_truck_rim_one {
left: 20%;
}
.green_truck .green_truck_rim_two {
left: 71%;
}
@keyframes green_truck_rim {
0% {
transform: rotate(360deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
Output Display
 |
| Download This Image and Use It |
Posts
40 Comments
Wonderful & excellent
ReplyDeleteKallu excellent
ReplyDeletePowerful
ReplyDeleteSuperb
ReplyDeleteBrilliant
ReplyDeleteAwesome
ReplyDeleteexclusive
ReplyDeleteVery Nice Guys
ReplyDeleteVery nice
ReplyDeleteSuperb
ReplyDeleteAwesome
ReplyDeletePerfect
ReplyDeleteExcellent
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeleteBrilliant
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteVery Nice
ReplyDeleteVery Nice
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAmazing
ReplyDeleteAmazing
ReplyDeleteAmazing & Awesome
ReplyDeleteAmazing
ReplyDeleteWonderful
ReplyDeleteSuperb
ReplyDeleteAmazing
ReplyDeleteAmazing
ReplyDeleteAmazing
ReplyDeleteWonderful
ReplyDeleteAmazing
ReplyDeleteAmazing
ReplyDeleteAmazing
ReplyDeleteAmazing
ReplyDeleteWonderful
ReplyDeleteVery good
ReplyDelete