stars galaxy lesson added

gargshruti30 · May 1, 2018 · 57368ee · 57368ee
1 parent 035721a
commit 57368ee
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 0 deletions.
diff --git a/stars and galaxy/images/stars.png b/stars and galaxy/images/stars.png
diff --git a/stars and galaxy/images/twinkling.png b/stars and galaxy/images/twinkling.png
diff --git a/stars and galaxy/index.html b/stars and galaxy/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<title>
+</title>
+<<head>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="stars"></div>
+<div class="twinkling"></div>
+</body>
+</html>
diff --git a/stars and galaxy/style.css b/stars and galaxy/style.css
@@ -0,0 +1,46 @@
+@keyframes move-twink-back{
+  from{background-position: 0 0;}
+  to{background-position: -10000px 5000px;}
+}
+@-webkit-keyframes move-twink-back{
+  from{background-position: 0 0;}
+  to{background-position: -10000px 5000px;}
+}
+@-moz-keyframes move-twink-back{
+  from{background-position: 0 0;}
+  to{background-position: -10000px 5000px;}
+}
+@-ms-keyframes move-twink-back{
+  from{background-position: 0 0;}
+  to{background-position: -10000px 5000px;}
+}
+
+.stars, .twinkling {
+  position: absolute;
+  top:0;
+  right:0;
+  bottom:0;
+  width:100%;
+  height: 100%;
+  display: block;
+}
+
+.stars{
+  background: #000 url(images/stars.png) repeat top center;
+  z-index: 0;
+}
+
+.twinkling{
+  background: transparent url(images/twinkling.png) repeat top center;
+  z-index: 1;
+
+  -moz-animation: move-twink-back 200s linear infinite;
+  -ms-animation:move-twink-back 200s linear infinite;
+  -o-animation:move-twink-back 200s linear infinite;
+  -webkit-animation:move-twink-back 200s linear infinite;
+  animation:move-twink-back 200s linear infinite;
+}
+
+
+
+