animated space

besttechbd · Dec 2, 2018 · f5f341c · f5f341c
1 parent d250bea
commit f5f341c
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 0 deletions.
diff --git a/img/Earth_Globe.png b/img/Earth_Globe.png
diff --git a/img/roket.gif b/img/roket.gif
diff --git a/img/star1.jpg b/img/star1.jpg
diff --git a/img/star2.png b/img/star2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<title>animated space</title>
+		<link rel="stylesheet" href="style.css">
+	</head>
+	<body>
+
+		<div class="main">
+			<div class="space2"></div>
+			<div class="space1"></div>
+			<div class="roket"></div>
+			<div class="earth"></div>
+		</div>
+	</body>
+</html>
diff --git a/style.css 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%;
+	}
+}