feat: mask image

wkylin · Jan 24, 2025 · 1f7a0e4 · 1f7a0e4
1 parent 34ffdfb
commit 1f7a0e4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -476,7 +476,13 @@ const Home = () => {
       </section>
       <section style={{ marginBottom: 40 }}>
         <AnimateOnScreen.FadeUp>
-          <img src="https://picsum.photos/360/200.jpg" alt="" />
+          <img
+            src="https://picsum.photos/360/200.jpg"
+            alt=""
+            style={{
+              maskImage: `linear-gradient(to top, transparent, black 20%, black 80%, transparent)`,
+            }}
+          />
         </AnimateOnScreen.FadeUp>
       </section>
       <section style={{ marginBottom: 40, width: 360, height: 200 }}>

diff --git a/src/pages/home/index.module.less b/src/pages/home/index.module.less
@@ -504,6 +504,20 @@
   transform: rotate(6deg);
 }
 
+.article::after {
+  background-image: linear-gradient(45deg, #6366f1, #4f46e5, #7e22ce);
+  bottom: -11px;
+  content: '';
+  height: 13px;
+  left: 0;
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 10" preserveAspectRatio="none"><path d="M0 5 Q 25 10, 50 5 T 100 5 T 150 5 T 200 5" stroke="white" stroke-width="2" fill="none"/></svg>');
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 10" preserveAspectRatio="none"><path d="M0 5 Q 25 10, 50 5 T 100 5 T 150 5 T 200 5" stroke="white" stroke-width="2" fill="none"/></svg>');
+  mask-size: cover;
+  mask-size: cover;
+  position: absolute;
+  width: 100%;
+}
+
 /* shift + alt +a
 backdrop-filter
 object-fit: cover;