feat: spin github star once on hover

agrmohit · Aug 30, 2024 · b10e649 · b10e649
1 parent 429fe89
commit b10e649
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -340,3 +340,22 @@ p:hover .emoji-wave {
     transform: rotate(0deg);
   }
 }
+
+.emoji-rotate {
+  display: inline-block;
+}
+
+span:hover .emoji-rotate {
+  animation-name: spin-animation;
+  animation-duration: 3s;
+  animation-iteration-count: 1;
+}
+
+@keyframes spin-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/assets/js/script-stars.js b/assets/js/script-stars.js
@@ -15,7 +15,9 @@ async function GitHubStars() {
     }
 
     if (stars) {
-      h3.innerHTML = h3.innerHTML.trim().replace("<a", ` <span title="${stars} GitHub stars">(${stars}⭐)</span><a`);
+      h3.innerHTML = h3.innerHTML
+        .trim()
+        .replace("<a", ` <span title="${stars} GitHub stars">(${stars}<span class="emoji-rotate">⭐</span>)</span><a`);
     }
   }