Improved glow animations.

jsachdeva7 · Jan 15, 2024 · b3d459f · b3d459f
1 parent 31315c7
commit b3d459f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/index.js b/index.js
@@ -24,12 +24,15 @@ function circle(icons) {
             icon.style.boxShadow = '0px 0px 100px rgb(120,120,120,0.5)';
             pfp.style.display = "none";
             slide.style.display = "flex";
+            icon.style.animation = "paused";
+            icon.style.backgroundColor = 'rgb(96, 96, 96)';
         });
 
         icon.addEventListener('mouseleave', () => {
             icon.style.boxShadow = '';
             pfp.style.display = "block";
             slide.style.display = "none";
+            icon.style.backgroundColor = 'rgb(47, 47, 47)';
         });
 
         icon.className = 'icon';

diff --git a/style.css b/style.css
@@ -47,11 +47,13 @@ body {
     background-repeat: no-repeat;
     position: absolute;
     transition: box-shadow 0.5s ease;
+    animation-name: glow;
+    animation-duration: 3.0s;
+    animation-iteration-count: infinite;
 }
 
-#circle:nth-child(1):hover{
-    animation-name: glow;
-    animation-duration: 1.0s;
+@keyframes glow{
+    50%{box-shadow: 0px 0px 48px rgba(140, 140, 140, 0.3)}
 }
 
 /* .icon:nth-child(1) { top: 50%; left: 0%; transform: translate(300%, -100%); }