added road and builids

2 years ago · 93a7eb999d
parent fdd0aede9e
commit 93a7eb999d
2 changed files with 56 additions and 2 deletions
--- a/movingCar/index.html
+++ b/movingCar/index.html
@ -9,7 +9,10 @@
 </head>

 <body>
-    <div class="main-bg"></div>
+    <div class="main-bg">
+        <div class="road"></div>
+        <div class="buildings"></div>
+    </div>
 </body>

 </html>
--- a/movingCar/style.css
+++ b/movingCar/style.css
@ -3,7 +3,6 @@ body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
-    direction: rtl;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

@ -25,4 +24,56 @@ ul {
    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);
+    }
 }