diff --git a/img/Earth_Globe.png b/img/Earth_Globe.png new file mode 100644 index 0000000..68e80bb Binary files /dev/null and b/img/Earth_Globe.png differ diff --git a/img/roket.gif b/img/roket.gif new file mode 100644 index 0000000..5e04529 Binary files /dev/null and b/img/roket.gif differ diff --git a/img/star1.jpg b/img/star1.jpg new file mode 100644 index 0000000..c53b814 Binary files /dev/null and b/img/star1.jpg differ diff --git a/img/star2.png b/img/star2.png new file mode 100644 index 0000000..ab1db53 Binary files /dev/null and b/img/star2.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e9c31a2 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + animated space + + + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6bac0f3 --- /dev/null +++ b/style.css @@ -0,0 +1,79 @@ +body{ + background-color: black; + margin: 0; + padding: 0; +} + +.main{ + width: 100%; + height: 100vh; + position: relative; + overflow: hidden; +} +.main .space1{ + position: absolute; + width: 200%; + height: 300px; + background: url('img/star1.jpg') repeat-x center; + animation: star1 100s linear infinite; + z-index: -10; +} + +.main .space2{ + position: absolute; + top: 0; + width: 200%; + height: 600px; + background: url('img/star2.png') repeat-x center; + z-index: 10; + animation: star2 90s linear infinite; +} +.main .earth{ + background: url('img/Earth_Globe.png') no-repeat center /cover; + width: 100px; + height: 100px; + position: absolute; + top: 300px; + right: -10%; + z-index: 100; + animation: earth 30s linear infinite; +} + +.main .roket{ + position: absolute; + top: 200px; + left: 100px; + transform: rotate(90deg); + width: 100px; + height: 100px; + background: url('img/roket.gif') no-repeat center /cover; + z-index: 100; +} + + +@keyframes star1{ + 0%{ + left: 0; + } + 100%{ + + left: -100%; + } +} +@keyframes star2{ + 0%{ + left: 0; + } + 100%{ + left: -100%; + } +} + +@keyframes earth{ + 0%{ + right: -5%; + } + 100%{ + right: 103%; + } +} \ No newline at end of file