Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <title>Animated Police Car</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="mainblock">
        <div class="background">
            <div class="road"></div>
            <div class="city"></div>
            <div class="car"><img src="https://i.imgur.com/d7jPlhA.png"></div>
            <div class="wheel">
                <img src="https://i.imgur.com/OSk9dPE.png" class="frontwheel">
                <img src="https://i.imgur.com/OSk9dPE.png" class="backwheel">
            </div>
        </div>
        </div>
    </body>
</html>
 
* {
    margin: 0;
    padding: 0;
    
}
#mainblock{
margin:auto;
width:1000px;
}
.background {
    height: 100vh;
    width: 100%;
    background-image: url(https://i.imgur.com/BaRIiih.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow-x: hidden;
}
.road {
    height: 150px;
    width: 500%;
    display: block;
    background-image: url(https://i.imgur.com/7JdjflY.jpg);
    background-repeat: repeat-x-fast;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    animation: road 5s linear infinite;
}
@keyframes road {
   100% {
       transform: translateX(-3400px);
   }
}
.city {
    height: 350px;
    width: 500%;
    background-image: url(https://i.imgur.com/hOxK5tN.png);
    position: absolute;
    bottom: 150px;
    left: 0;
    right: 0;
    display: block;
    z-index: 1;
    background-repeat: repeat-x-;
    animation: city 20s linear infinite;
}
@keyframes city {
   100% {
       transform: translateX(-1400px);
   }
}
.car {
    width: 400px;
    position: absolute;
    bottom: 50px;
    z-index: 2;
    transform: translateX(50%);
    animation: car 1s linear infinite;
}
.car img {
    width: 100%;
}
@keyframes car {
   100% {
       transform: translateY(-2px);
   }
    50% {
       transform: translateY(2px);
   }
    0% {
       transform: translateY(-2px);
   }
}
.wheel {
    left: 50%;
    bottom: 178px;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
}
.wheel img {
    width: 68px;
    height: 68px;
    animation: wheel 1s linear infinite;
}
.backwheel {
    position: absolute;
    left: -427px;
    bottom: -125px;
}
​
.frontwheel {
    position: absolute;
    left: -222px;
    bottom: -125px;
}
@keyframes wheel {
    100% {
        transform: rotate(360deg);
    }
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
githubajaydhagepro
0viewers