*, body { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } a { text-decoration: none; } li, ol, ul { margin: 0; padding: 0; list-style: none; } .main-bg { width: 100%; height: 100vh; background-image: url('./image/sky-image.jpg'); background-size: cover; background-repeat: no-repeat; position: relative; overflow-x: hidden; } .road { background-image: url('./image/road.png'); height: 200px; width: 500%; background-repeat: repeat-x; background-size: contain; display: block; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; animation: road 4s linear infinite; } @keyframes road { 0% { transform: translateX(0); } 100% { transform: translateX(-4000px); } } .buildings { height: 250px; width: 500%; background-image: url('./image/city.png'); position: absolute; background-size: contain; background-repeat: repeat-x; bottom: 200px; left: 0; right: 0; display: block; z-index: 1; animation: buildings 20s linear infinite; } @keyframes buildings { 0% { transform: translateX(0px); } 100% { transform: translateX(-4000px); } } .car { width: 400px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 130px; z-index: 2; } .car img { width: 100%; animation: shake 1s linear infinite; } @keyframes shake { 0% { transform: translateY(-1px); } 50% { transform: translateY(1px); } 100% { transform: translateY(-1px); } } .wheels { left: 50%; position: absolute; bottom: 120px; transform: translateX(-50%); z-index: 3; } .wheels img { width: 58px; animation: rotate 1s linear infinite; } .wheels .wheel-back { position: absolute; left: -152px; bottom: 13px; } .wheels .wheel-front { position: absolute; left: 58px; bottom: 13px; } @keyframes rotate { 100% { transform: rotate(360deg); } }