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; } body{ margin:0; padding: 0; } .container{ width: 1366px; height: 657px; position: relative; background-image: url("https://www.frontendforever.com/uploads/assets/1.jpg"); background-size: cover; animation: animate 500s linear infinite; } @keyframes animate{ 0% { } 50%{ background-position: 10000px; } 100%{ background-position: 10000px; } } .road{ width: 1330px; height: 130px; background: black; position: absolute; top:75%; left: 0%; transform-origin: bottom; transform-style: preserve-3d; transform: perspective(200px) rotateX(20deg); } .road:before{ content: ''; position: absolute; top:50%; transform: translateY(-50%); left: 0; width: 100%; height: 10px; background: linear-gradient(90deg,white 0%,white 70%,black 70%,black 100%); background-size: 200px; animation: road 5s linear infinite; } @keyframes road{ 0%{ background-position: 0px; } 100%{ background-position: 200px; } } .road:after{ content: ''; position: absolute; width: 100%; height: 30px; background: black; bottom: -30px; transform-origin: top; transform: perspective(1200px) rotateX(-20deg); } .container img{ position: absolute; height: 300px; top:50%; right: 0%; animation: moonwalk 10s linear infinite; } @keyframes moonwalk{ 0%{ } 100%{ transform: translateX(-1000px); } } audio{ outline: none; display: none; }
console.log("Event Fired")