Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } .container{ width: 100%; height: 100vh; position: relative; background: url(https://www.frontendforever.com/uploads/assets/building1.jpg); background-size: cover; animation: bg 2.5s linear; } @keyframes bg{ 0%{ } 100%{ background-position: 1250px; } } .road{ width: 100%; height: 130px; background: black; position: absolute; bottom: -17px; left: 0%; transform: rotateX(60deg); } .road:before{ content: ''; position: absolute; top: 50%; left: 0%; width: 100%; height: 10px; background: linear-gradient(90deg,white 0%,white 70%,black 70%,black 100%); background-size: 200px; animation: road 2.5s linear; } @keyframes road{ 0%{ background-position: 0px; } 100%{ background-position: 1000px; } } .road:after{ content: ''; position: absolute; width: 100%; height: 30px; background: black; bottom: -30px; } img:nth-child(1){ position: absolute; bottom: 3%; z-index: 1; animation: move 10s linear; } @keyframes move{ 25%{ transform: translateX(400px); } 50%{ transform-origin: left; transform-style: preserve-3d; transform: rotateZ(190deg); } 100%{ width: 0px; height: 0px; } } img:nth-child(2){ position: absolute; height: 200px; width: 400px; bottom: 1%; right: 17%; z-index: 1; animation: car 5s linear; } @keyframes car{ 0%{ right: 0%; } 50%{ right: 17% } }
console.log("Event Fired")