Landing | border animation added

primefaces · Jan 9, 2024 · 49897bb · 49897bb
1 parent ec65185
commit 49897bb
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 0 deletions.
diff --git a/src/assets/showcase/styles/layout/landing/_main.scss b/src/assets/showcase/styles/layout/landing/_main.scss
@@ -7,8 +7,54 @@
         border: 1px solid var(--home-border-color);
         border-radius: 10px;
         background-color: var(--home-box-bg);
+        position: relative;
+        z-index: 0;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border: 2px solid var(--home-box-ring-color);
+            transition: all .5s;
+            animation: clippath 3s infinite linear;
+            border-radius: 10px;
+            opacity: 0;
+            z-index: -1;
+        }
+
+        &::after {
+            animation: clippath 3s infinite -1.5s linear;
+        }
+
+        &:hover {
+            &::before,
+            &::after {
+                opacity: 1;
+            }
+        }
     }
 
+@keyframes clippath {
+        0%,
+        100% {
+            clip-path: inset(0 0 98% 0);
+        }
+
+        25% {
+            clip-path: inset(0 98% 0 0);
+        }
+        50% {
+            clip-path: inset(98% 0 0 0);
+        }
+        75% {
+            clip-path: inset(0 0 0 98%);
+        }
+    }
+
     .linkbox {
         transition: background-color .2s, border-color .2s;
         display: inline-flex;

diff --git a/src/assets/showcase/styles/layout/variables/landing/_dark.scss b/src/assets/showcase/styles/layout/variables/landing/_dark.scss
@@ -49,4 +49,5 @@
     --home-templates-btn-border-bottom:4px solid #424b57;
     --home-templates-btn-border-left:3px solid #424b57;
     --home-features-card-shadow: none;
+    --home-box-ring-color: rgba(96, 165, 250, 0.3);
 }
diff --git a/src/assets/showcase/styles/layout/variables/landing/_light.scss b/src/assets/showcase/styles/layout/variables/landing/_light.scss
@@ -49,4 +49,5 @@
     --home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
     --home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
     --home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
+    --home-box-ring-color: var(--primary-100);
 }