feat: dot mask background

wkylin · Dec 6, 2024 · ddacb4a · ddacb4a
1 parent 1f73a41
commit ddacb4a
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 1 deletion.
diff --git a/src/components/stateless/Spotlight/index.module.less b/src/components/stateless/Spotlight/index.module.less
@@ -5,7 +5,6 @@
   border: 1px solid #1e293b;
   background-image: linear-gradient(to right, #1e293b, #06171b);
   padding: 1px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
 
 .spotlight {

diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -265,6 +265,11 @@ const Home = () => {
           <section></section>
         </SpotlightCard>
       </section>
+      <section className={styles.box} style={{ marginBottom: 40, width: 360, height: 200, position: 'relative', backgroundColor: 'rgba(0, 0,0, 0.9)', borderRadius:8 }}>
+        <section className={styles.dotMask}>
+          我的中国心
+          </section>
+      </section>
       <section style={{ marginBottom: 40, height: 200, width: 360, overflow: 'hidden' }}>
         <MeshGradientBackground />
       </section>

diff --git a/src/pages/home/index.module.less b/src/pages/home/index.module.less
@@ -415,3 +415,69 @@
   color: white;
   font-size: 48px;
 }
+
+
+.dotMask {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  width: 100%;
+  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
+  background-size: 16px 16px;
+  -webkit-mask-image: radial-gradient(
+    ellipse 50% 50% at 50% 50%,
+    #000 60%,
+    transparent 100%
+  );
+  mask-image: radial-gradient(
+    ellipse 50% 50% at 50% 50%,
+    #000 60%,
+    transparent 100%
+  );
+}
+
+.dot {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  width: 100%;
+  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
+  background-size: 16px 16px;
+}
+
+.grid {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  width: 100%;
+  background-image: linear-gradient(to right, #80808012 1px, transparent 1px),
+    linear-gradient(to bottom, #80808012 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px;
+  border: 3px solid #0000;
+  border-radius: 12px;
+  background: linear-gradient(#131219, #131219) padding-box, linear-gradient(
+        var(--angle),
+        #070707,
+        #687aff
+      ) border-box;
+  animation: 4s rotate linear infinite;
+}
+
+@keyframes rotate {
+  to {
+    --angle: 360deg;
+  }
+}
+
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}