From ddacb4ac6439c47a80ab15a47fcb5b6585073c32 Mon Sep 17 00:00:00 2001
From: wkylin <wkylin.w@gmail.com>
Date: Fri, 6 Dec 2024 16:11:11 +0800
Subject: [PATCH] feat: dot mask background

---
 .../stateless/Spotlight/index.module.less     |  1 -
 src/pages/home/index.jsx                      |  5 ++
 src/pages/home/index.module.less              | 66 +++++++++++++++++++
 3 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/src/components/stateless/Spotlight/index.module.less b/src/components/stateless/Spotlight/index.module.less
index e0eb27a5..55f4a1c2 100644
--- 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
index 84d36dae..2e4210dd 100644
--- 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
index 587a6356..47b29911 100644
--- 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;
+}
\ No newline at end of file