add Omnitrix Animation

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

Hide file tree

Showing 2 changed files with 153 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;
+  }
+}