Merge pull request #1715 from zero-to-mastery/carv0066-animation-button

Carv0066 animation button
zero-to-mastery · Sep 6, 2023 · ff458ab · ff458ab
2 parents 1560856 + a5f8956
commit ff458ab
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 0 deletions.
diff --git a/Art/detonate-button/detonate-button.gif b/Art/detonate-button/detonate-button.gif
diff --git a/Art/detonate-button/index.html b/Art/detonate-button/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/Art/detonate-button/main.css" />
+    <title>Document</title>
+  </head>
+
+  <body>
+    <main class="container">
+      <button class="doomsday explosion">Doomsday!!</button>
+    </main>
+  </body>
+</html>
diff --git a/Art/detonate-button/main.css b/Art/detonate-button/main.css
@@ -0,0 +1,128 @@
+.container {
+  text-align: center;
+  height: 100vh; /*reason it was not centering, i had height at just 100% instead of 100vh*/
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.doomsday {
+  margin: 0 auto;
+  height: 80px;
+  color: white;
+  background-color: #dc143c;
+  font-size: 2em;
+  font-weight: bold;
+  animation-name: normalmode;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-fill-mode: both;
+  border: 2mm ridge rgba(50, 1, 3, 0.6);
+  border-radius: 10px;
+}
+
+.doomsday:hover {
+  color: white;
+  font-size: 2em;
+  font-weight: bold;
+  animation-name: hovering-active;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-fill-mode: both;
+}
+
+/*  Not infinite so it stays big and explodes in the end*/
+.doomsday:active {
+  color: white;
+  font-size: 2em;
+  font-weight: bold;
+  animation-name: hovering-active;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 29;
+  animation-direction: alternate;
+  animation-fill-mode: both;
+}
+
+@keyframes normalmode {
+  0%,
+  10% {
+    color: orange;
+  }
+
+  40% {
+    color: yellow;
+  }
+
+  60% {
+    color: green;
+  }
+
+  100% {
+    color: #dc143c;
+  }
+}
+
+@keyframes hovering-active {
+  0% {
+    transform: translate(0) scale(1);
+  }
+
+  10% {
+    transform: translate(-2px, 2px);
+    color: orange;
+  }
+
+  20% {
+    transform: translate(2px, -2px);
+    color: orange;
+  }
+
+  30% {
+    transform: translate(-2px, 2px) scale(1.2);
+    color: yellow;
+  }
+
+  40% {
+    transform: translate(-3px, -3px) scale(1.2);
+    color: yellow;
+  }
+
+  50% {
+    transform: translate(3px, -3px) scale(1.2);
+    color: yellow;
+  }
+
+  60% {
+    transform: translate(3px, 3px) scale(1.2);
+    color: green;
+  }
+
+  70% {
+    transform: translate(-4px, -4px) scale(1.2);
+    color: green;
+  }
+
+  80% {
+    transform: translate(4px, -4px) scale(1.5);
+    color: green;
+  }
+
+  90% {
+    transform: translate(5px, -5px) scale(1.5);
+    color: #dc143c;
+  }
+
+  100% {
+    transform: translate(0) scale(2.5);
+    color: #dc143c;
+    animation-delay: 1s;
+  }
+}
diff --git a/include.js b/include.js
@@ -6539,6 +6539,13 @@ let cards = [
     imageLink: './Art/nfluk/Screenshot.png',
     author: 'nfluk',
     githubLink: 'https://github.com/nfluk'
+  },
+  {
+    artName: 'Detonation Button',
+    pageLink: './Art/detonate-button/index.html',
+    imageLink: './Art/detonate-button/detonate-button.gif',
+    author: 'carv066',
+    githubLink: 'https://github.com/carv0066'
   }
 ];