Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
body {
padding: 0;
margin: 0;
background-color: #d5eeff;
}
.car-wrapper {
width: 800px;
position: absolute;
bottom:0;
left: 15%;
}
.car-wrapper .car-img{
width: 100%;
}
.tire-wrapper {
width: 130px;
position: absolute;
bottom: -4px;
border-radius: 50%;
}
.back-tire-wrapper {
left: 88px;
}
.front-tire-wrapper {
right: 95px;
}
.tire-wrapper .tire {
width: 100%;
transform-origin: 50%;
animation-name: circle;
animation-duration: 0.7s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes circle {
0% {transform: rotate(0deg);}
100% {transform: rotate(365deg);}
}
@keyframes forest {
0% {left: 0}
100% {left: -3840px;}
}
.road {
width: 1920px;
height: 200px;
background-color: #484545;
position: absolute;
bottom: -32px;
z-index: -1;
background: linear-gradient(0deg, rgb(31, 31, 31) 0%, rgb(156, 156, 156) 100%);
}
.road-line {
position: absolute;
width: 6000px;
border: 5px dashed #fff;
bottom: 30%;
animation-name: forest;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.main-container {
height: 100vh;
min-height: 650px;
background-position: center left;
background-size: 1920px;
background-repeat: repeat-x;
position: relative;
overflow-X: hidden;
background-image: url('http://www.devanswer.com/img/mountain.png');
}
.forest-img-wrapper {
width: 8000px;
height: 549px;
background-repeat: repeat-x;
bottom:0;
background-position: center;
position: absolute;
animation-name: forest;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: both;
background-image: url('http://www.devanswer.com/img/car-grass.png');
}
@media (max-width: 640px){
.car-wrapper {
width: 264px;
}
.tire-wrapper {
width: 42px;
bottom: -1px;
}
.front-tire-wrapper {
right: 32px;
}
.back-tire-wrapper {
left: 30px;
}
.road {
height: 80px;
}
.forest-img-wrapper {
height: 232px;
background-size: 1597px;
background-repeat: repeat-x;
bottom: 0;
}
.road-line {
border: 2px dashed #fff;
}
.main-container {
min-height: 483px;
background-size: 620px;
min-height: 483px;
background-size: 620px;
background-position: 0 74%;
}
}
</style>
</head>
<body>
<div class="main-container">
<div class="forest-img-wrapper"></div>
<div class="car-wrapper">
<img class="car-img" src="http://www.devanswer.com/img/blue-car.png" />
<div class="tire-wrapper back-tire-wrapper">
<img class="tire back-tire" src="http://www.devanswer.com/img/tire.png" />
</div>
<div class="tire-wrapper front-tire-wrapper">
<img class="tire front-tire" src="http://www.devanswer.com/img/tire.png" />
</div>
</div>
<div class="road">
<div class="road-line"></div>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
</html>
