add sunmoon animation

zero-to-mastery · Oct 8, 2024 · b519c2b · b519c2b
1 parent b8af73c
commit b519c2b
Show file tree

Hide file tree

Showing 2 changed files with 172 additions and 0 deletions.
diff --git a/Art/Debajyati-sunmoon/index.html b/Art/Debajyati-sunmoon/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>sunmoon</title>
+    <link href="./styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="sun"></div>
+      <div class="moon"></div>
+      <div class="clouds one"></div>
+      <div class="clouds two"></div>
+      <div class="clouds three"></div>
+      <div class="clouds four"></div>
+      <div class="clouds five"></div>
+      <div class="clouds six"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/Debajyati-sunmoon/styles.css b/Art/Debajyati-sunmoon/styles.css
@@ -0,0 +1,150 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  font-family: Arial, sans-serif;
+}
+
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  animation: changeBackground 20s linear infinite;
+}
+
+.sun,
+.moon {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation-timing-function: linear;
+}
+
+.sun {
+  background-color: #f1c40f;
+  animation: sunMovement 20s linear infinite;
+}
+
+.moon {
+  background-color: #d3d3d3;
+  opacity: 0;
+  animation: moonMovement 20s linear infinite;
+}
+
+@keyframes changeBackground {
+  0%, 50% {
+    background-color: #87ceeb; /* Day - Sky blue color */
+  }
+  51%, 100% {
+    background-color: #2b2b63; /* Night - Dark indigo color */
+  }
+}
+
+@keyframes sunMovement {
+  0% {
+    transform: translate(-50%, 0) translateY(50vh);
+  }
+  25% {
+    transform: translate(-50%, -50%) translateY(-50vh);
+  }
+  50% {
+    transform: translate(-50%, -50%) translateY(50vh);
+    opacity: 0;
+  }
+  51% {
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, 0) translateY(50vh);
+    opacity: 1;
+  }
+}
+
+@keyframes moonMovement {
+  0%, 50% {
+    transform: translate(-50%, -50%) translateY(50vh);
+    opacity: 0;
+  }
+  51% {
+    transform: translate(-50%, 0) translateY(50vh);
+    opacity: 1;
+  }
+  75% {
+    transform: translate(-50%, -50%) translateY(-50vh);
+  }
+  100% {
+    transform: translate(-50%, -50%) translateY(50vh);
+    opacity: 0;
+  }
+}
+
+.clouds {
+  width: 400px;
+  height: 100px;
+  position: absolute;
+  top: 20%;
+  left: -400px;
+  background: transparent;
+  animation: cloudMovement 40s linear infinite;
+}
+
+.clouds::before,
+.clouds::after {
+  content: '';
+  width: 150px;
+  height: 80px;
+  background-color: #fff;
+  position: absolute;
+  top: 10px;
+  border-radius: 50%;
+}
+
+.clouds::before {
+  left: 20px;
+}
+
+.clouds::after {
+  left: 200px;
+}
+
+.one {
+  top: 20%;
+  animation-delay: 0s;
+}
+
+.two {
+  top: 30%;
+  animation-delay: 5s;
+}
+
+.three {
+  top: 40%;
+  animation-delay: 10s;
+}
+
+.four {
+  top: 50%;
+  animation-delay: 15s;
+}
+
+.five {
+  top: 60%;
+  animation-delay: 20s;
+}
+
+.six {
+  top: 70%;
+  animation-delay: 25s;
+}
+
+@keyframes cloudMovement {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(200vw);
+  }
+}