finished car project

movingCar/index.html

@@ -12,6 +12,13 @@
     <div class="main-bg">
         <div class="road"></div>
         <div class="buildings"></div>
+        <div class="car">
+            <img src="./image/carImage.png" alt="">
+        </div>
+        <div class="wheels">
+            <img class="wheel-back" src="./image/circle.png" alt="">
+            <img class="wheel-front" src="./image/circle.png" alt="">
+        </div>
     </div>
 </body>
 

movingCar/style.css

@@ -77,3 +77,62 @@ ul {
         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);
+    }
+}