diff --git a/movingCar/index.html b/movingCar/index.html index d31accc..e505e15 100644 --- a/movingCar/index.html +++ b/movingCar/index.html @@ -9,7 +9,10 @@ -
+
+
+
+
\ No newline at end of file diff --git a/movingCar/style.css b/movingCar/style.css index 1c8714c..d247591 100644 --- 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); + } } \ No newline at end of file