* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(#8ed0f5 0%, #cceeff 70%, #eef8fc 100%);
  position: relative;
}

/* -------------------------
   SKY / CLOUDS
------------------------- */

.cloud {
  position: absolute;
  width: 140px;
  height: 40px;
  background: white;
  border-radius: 40px;
  opacity: 0.8;
  animation: cloudMove 25s linear infinite;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: white;
  border-radius: 50%;
}

.cloud::before {
  width: 60px;
  height: 60px;
  left: 25px;
  bottom: 10px;
}

.cloud::after {
  width: 80px;
  height: 80px;
  left: 65px;
  bottom: 5px;
}

.cloud.one {
  top: 80px;
  left: -200px;
}

.cloud.two {
  top: 170px;
  left: -300px;
  transform: scale(.7);
  animation-duration: 35s;
}

@keyframes cloudMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(130vw);
  }
}

/* -------------------------
   ROAD
------------------------- */

.road {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 170px;
  background: #393939;
}

.road-line {
  position: absolute;
  top: 75px;
  width: 100%;
  height: 8px;
  background: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff 80px,
    transparent 80px,
    transparent 150px
  );
  animation: roadMove .8s linear infinite;
}

@keyframes roadMove {
  from {
    background-position: 0 0;
  }

to {
    background-position: -150px 0;
  }
}

/* -------------------------
   TRUCK
------------------------- */

.truck {
  position: absolute;
  width: 520px;
  height: 220px;
  left: -550px;
  bottom: 105px;

animation:
    drive 8s linear infinite,
    bounce .25s ease-in-out infinite alternate;
}

/* Truck body */

.truck-body {
  position: absolute;
  left: 20px;
  bottom: 50px;
  width: 370px;
  height: 115px;
  background: #d71920;
  border-radius: 12px 8px 5px 5px;
}

/* Cargo container */

.cargo {
  position: absolute;
  left: 10px;
  top: -5px;
  width: 270px;
  height: 100px;
  background: #e21b23;
  border-radius: 6px 6px 2px 2px;
  box-shadow: inset 0 -8px rgba(0,0,0,.08);
}

/* Cargo lines */

.cargo-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(0,0,0,.12);
}

.cargo-line.one {
  left: 75px;
}

.cargo-line.two {
  left: 145px;
}

.cargo-line.three {
  left: 215px;
}

/* Cab */

.cab {
  position: absolute;
  right: 0;
  bottom: 50px;
  width: 150px;
  height: 115px;
  background: #ed2224;
  border-radius: 12px 15px 5px 5px;
}

/* Hood */

.hood {
  position: absolute;
  right: -15px;
  bottom: 50px;
  width: 35px;
  height: 48px;
  background: #ed2224;
  border-radius: 0 8px 4px 0;
}

/* Windshield */

.window {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 68px;
  height: 48px;
  background: #8fd5ed;
  border: 4px solid #b71218;
  border-radius: 5px;
  transform: skew(-8deg);
}

.window::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 28px;
  height: 48px;
  width: 4px;
  background: #b71218;
}

/* Door */

.door {
  position: absolute;
  bottom: 5px;
  right: 18px;
  width: 75px;
  height: 62px;
  border: 3px solid rgba(0,0,0,.15);
  border-radius: 5px;
}

/* Door handle */

.handle {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 15px;
  height: 5px;
  background: #444;
  border-radius: 3px;
}

/* Headlight */

.headlight {
  position: absolute;
  right: -7px;
  bottom: 82px;
  width: 12px;
  height: 18px;
  background: #fff7b2;
  border-radius: 3px;
  box-shadow: 0 0 15px #fff7b2;
}

/* Bumper */

.bumper {
  position: absolute;
  right: -15px;
  bottom: 45px;
  width: 35px;
  height: 12px;
  background: #333;
  border-radius: 5px;
}

/* -------------------------
   WHEELS
------------------------- */

.wheel {
  position: absolute;
  bottom: 15px;
  width: 72px;
  height: 72px;
  background: #171717;
  border: 8px solid #111;
  border-radius: 50%;

animation: wheelSpin .5s linear infinite;
}

.wheel::before {
  content: "";
  position: absolute;
  inset: 12px;
  background: #777;
  border-radius: 50%;
}

.wheel::after {
  content: "";
  position: absolute;
  inset: 24px;
  background: #222;
  border-radius: 50%;
}

.wheel.front {
  right: 45px;
}

.wheel.back {
  left: 55px;
}

@keyframes wheelSpin {
  to {
    transform: rotate(360deg);
  }
}

/* -------------------------
   ANIMATION
------------------------- */

@keyframes drive {
  0% {
    left: -550px;
  }

100% {
    left: calc(100vw + 50px);
  }
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }

to {
    transform: translateY(3px);
  }
}

/* -------------------------
   EXHAUST
------------------------- */

.exhaust {
  position: absolute;
  left: -5px;
  bottom: 62px;
  width: 15px;
  height: 15px;
  background: #555;
  border-radius: 50%;
  opacity: 0;
  animation: smoke 1s ease-out infinite;
}

.exhaust.two {
  animation-delay: .5s;
}

@keyframes smoke {
  0% {
    transform: translate(0, 0) scale(.3);
    opacity: .6;
  }

100% {
    transform: translate(-60px, -40px) scale(2);
    opacity: 0;
  }
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground