feat: add effect for number ticker

nervosnetwork · Nov 29, 2024 · 4b50923 · 4b50923
1 parent db26095
commit 4b50923
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/public/images/bg/ticker_bg.gif b/public/images/bg/ticker_bg.gif
diff --git a/src/pages/Home/Banner/index.module.scss b/src/pages/Home/Banner/index.module.scss
@@ -133,6 +133,12 @@ $backgroundColor: #232323;
   mix-blend-mode: difference;
   line-height: 1.2;
   font-size: 50px;
+  outline: none;
+  background: url('/images/bg/ticker_bg.gif');
+  background-size: cover;
+  background-position: center center;
+  background-clip: text;
+  color: transparent;
 
   .ticker {
     display: flex;
@@ -142,4 +148,13 @@ $backgroundColor: #232323;
   @media screen and (width <= 500px) {
     font-size: 30px;
   }
+
+  body {
+    margin: 0;
+    font: 100% / 1.5 Raleway, sans-serif;
+    color: hsl(230deg 100% 95%);
+    background: linear-gradient(135deg, hsl(230deg 40% 12%), hsl(230deg 20% 7%));
+    height: 100vh;
+    display: flex;
+  }
 }