Home
Bonimater
car delivary

car delivary

it is used especially in e-commerce when you you are going to deliver

This tailwind example is contributed by Bonimater, on 27-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Animation

Author Bonimater

156

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Responsive Truck Animation with Wheels</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes drive {
      0% { left: -40%; }
      100% { left: 110%; }
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .truck-animation {
      animation: drive 10s linear infinite;
    }
    .wheel-spin {
      animation: spin 1s linear infinite;
    }
  </style>
</head>
<body class="bg-blue-200 h-screen overflow-hidden relative">

<div class="absolute bottom-20 w-full h-24 bg-gray-800">
    <div class="h-1 w-full bg-yellow-300 mt-11 animate-pulse"></div>
  </div>

<div
    class="absolute bottom-36 truck-animation flex items-end space-x-1"
    style="left: -40%;"
  >
    
    <div
      class="relative bg-yellow-400 rounded-l-md shadow-md
             w-28 h-14 sm:w-36 sm:h-20 md:w-40 md:h-20"
    >
      
      <div
        class="absolute top-3 right-3 sm:top-4 sm:right-4 md:top-4 md:right-4
               w-2 h-5 sm:w-3 sm:h-7 md:w-3 md:h-8 bg-yellow-600 rounded-sm"
      ></div>

<div class="absolute bottom-[-20px] left-6 flex space-x-10">
        <div
          class="wheel-spin w-6 h-6 sm:w-8 sm:h-8 md:w-8 md:h-8
                 bg-black rounded-full border-2 border-white"
        ></div>
        <div
          class="wheel-spin w-6 h-6 sm:w-8 sm:h-8 md:w-8 md:h-8
                 bg-black rounded-full border-2 border-white"
        ></div>
      </div>
    </div>

<div
      class="relative bg-red-600 rounded-r-2xl shadow-md
             w-16 h-14 sm:w-20 sm:h-18 md:w-20 md:h-20"
    >
      
      <div
        class="absolute top-2 left-2 sm:top-3 sm:left-3 md:top-3 md:left-3
               w-5 h-4 sm:w-7 sm:h-5 md:w-7 md:h-5 bg-white rounded-sm"
      ></div>
      <div
        class="absolute top-2 right-2 sm:top-3 sm:right-3 md:top-3 md:right-3
               w-5 h-4 sm:w-7 sm:h-5 md:w-7 md:h-5 bg-white rounded-sm"
      ></div>

<div
        class="absolute bottom-2 left-4 sm:bottom-3 sm:left-5 md:bottom-3 md:left-5
               w-7 h-6 sm:w-9 sm:h-7 md:w-9 md:h-7 bg-red-700 rounded-sm"
      ></div>

<div class="absolute bottom-[-20px] left-1 flex space-x-2">
        <div
          class="wheel-spin w-6 h-6 sm:w-8 sm:h-8 md:w-8 md:h-8
                 bg-black rounded-full border-2 border-white"
        ></div>
        <div
          class="wheel-spin w-6 h-6 sm:w-8 sm:h-8 md:w-8 md:h-8
                 bg-black rounded-full border-2 border-white"
        ></div>
      </div>
    </div>
  </div>

</body>
</html>

Related Examples

REGISTER - CTA - SECTION animation

Author:
ABDO-SY

2 months ago

209
Animated Coming Soon Page 3

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

6 months ago

1.2k
Animated Coming Soon 4

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

927
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

10 months ago

2.9k
background animation
background animation

Author:
Anonymous

1 year ago

45.7k
HOT DOGS WEB SITE
it combine the hot dogs delivary

Author:
bonheur dev

1 month ago

45
Onhover underline effect

Author:
Dika Rahman

1 year ago

2.9k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

5 months ago

1.3k
Animated Gradient Background
animates a gradient background with vibrant colors. Slowly changes colors.

Author:
Anonymous

1 year ago

22.8k
Loading dots
Black Loading dots

Author:
Никита (Whiso)

5 months ago

1.3k
car delivary
car delivary

Author:
Bonimater

3 weeks ago

29
Text Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

2 months ago

565

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components