Merge pull request #2700 from Debajyati/Debajyati

added my two animations
zero-to-mastery · Oct 8, 2024 · e00d02a · e00d02a
2 parents b16e694 + 4c06a0c
commit e00d02a
Show file tree

Hide file tree

Showing 4 changed files with 325 additions and 0 deletions.
diff --git a/Art/Debajyati-Omnitrix/index.html b/Art/Debajyati-Omnitrix/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.0" />
+  <title>Omnitrix</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <div class="container">
+    <div class="inner-container">
+      <div class="hourglass">
+        <div id="triangles">
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/Art/Debajyati-Omnitrix/styles.css b/Art/Debajyati-Omnitrix/styles.css
@@ -0,0 +1,131 @@
+body {
+  background-color: #000;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  animation: flash 5.5s ease-in-out;
+}
+
+.container {
+  width: 300px;
+  height: 300px;
+  background: #010101;
+  /* Created with https://www.css-gradient.com */
+  background: radial-gradient(at left top, #010101, #ffffff);
+  /* Gradient link: https://www.css-gradient.com/?c1=010101&c2=ffffff&gt=r&gd=dtl */
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.inner-container {
+  width: 250px;
+  height: 250px;
+  background-color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  clip-path: circle(50% at 50% 50%);
+  animation: greenFlash 4s ease-in-out;
+}
+
+.hourglass {
+  width: 100%;
+  height: 100%;
+}
+
+#triangles {
+  background-color: #009933;
+  height: 100%;
+  width: 100%;
+  clip-path: polygon(0% 0%, 30% 50%, 0% 100%, 100% 100%, 70% 50%, 100% 0%);
+  transition: clip-path 1s ease-in-out;
+  animation: changeShape 1s ease forwards, redFlicker 5s ease, redEnd 0.5s ease 5s;
+}
+
+@media (max-width: 400px) {
+  .container {
+    width: 150px;
+    height: 225px;
+  }
+
+  .inner-container {
+    width: 100px;
+    height: 175px;
+  }
+}
+
+@keyframes changeShape {
+  0% {
+    clip-path: polygon(0% 0%, 30% 50%, 0% 100%, 100% 100%, 70% 50%, 100% 0%); /* The OG Omnitrix Shape */
+    transform: rotate(0deg);
+  }
+  33% {
+    transform: rotate(90deg);
+  }
+  66% {
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* Barfi Shape */
+    transform: rotate(0deg);
+  }
+  100% {
+    clip-path: polygon(0% 0%, 30% 50%, 0% 100%, 100% 100%, 70% 50%, 100% 0%);
+  }
+}
+
+/* all flashes after omnitrix starts (hero time) */
+@keyframes greenFlash {
+  0% {
+    background-color: #000;
+  }
+  70% {
+    background-color: #009933;
+  }
+  80% {
+    background-color: #33ff33;
+  }
+  90% {
+    background-color: #000;
+  }
+}
+
+@keyframes flash {
+  0% {
+    background-color: #000;
+  }
+  65% {
+    background-color: #009933;
+  }
+  75% {
+    background-color: #33ff33;
+  }
+  85% {
+    background-color: #000;
+  }
+  100% {
+    background-color: #ff0000;
+  }
+}
+
+@keyframes redFlicker {
+  0%, 90%, 92%, 94%, 96% {
+    background-color: #009933;
+  }
+  91%, 93%, 95%, 97% {
+    background-color: #e4181e;
+  }
+  100% {
+    background-color: #ff0000;
+  }
+}
+
+@keyframes redEnd {
+  0% {
+    background-color: #e4181e;
+  }
+  100% {
+    background-color: #ff0000;
+  }
+}
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);
+  }
+}