Merge pull request #264 from hepengwei/feat_he

新增几个背景图案案例
hepengwei · Dec 20, 2024 · 1ab1a4e · 1ab1a4e
2 parents 16f00a7 + e50370e
commit 1ab1a4e
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 4 deletions.
diff --git a/docs/155.js b/docs/155.js
diff --git a/docs/main.js b/docs/main.js
diff --git a/docs/styles/pages/155.fb21c6c1.css → docs/styles/pages/155.99c3b787.css b/docs/styles/pages/155.fb21c6c1.css → docs/styles/pages/155.99c3b787.css
diff --git a/src/pages/html/BackgroundEffect/index.module.scss b/src/pages/html/BackgroundEffect/index.module.scss
@@ -677,4 +677,44 @@
       radial-gradient($size at 100% 100%, $g) $color2;
     background-size: calc(2 * $r) calc(2 * $r);
   }
+
+  .bg30 {
+    @include bg;
+    background-image: repeating-radial-gradient(#f8f1f1ee 88%, #963fdd 90%);
+    background-size: 50px 50px;
+  }
+
+  .bg31 {
+    @include bg;
+    background: linear-gradient(
+        45deg,
+        transparent 33.33%,
+        rgba(57, 144, 179, 0.1) 33.33%,
+        rgba(0, 0, 0, 0.1) 66.66%,
+        transparent 66.66%
+      ),
+      lightblue;
+    background-size: 20px 20px;
+  }
+
+  .bg32 {
+    @include bg;
+    background-image: repeating-radial-gradient(#f8f1f1ee 87%, #3fa7b4 90%);
+    background-size: 50px 50px;
+  }
+
+  .bg33 {
+    @include bg;
+    background: repeating-radial-gradient(red 55%, white 56%);
+  }
+
+  .bg34 {
+    @include bg;
+    background-image: repeating-radial-gradient(
+      #e2d1d1 50%,
+      #e7d2d2ee 70%,
+      #f5c7a1 95%
+    );
+    background-size: 50px 50px;
+  }
 }
diff --git a/src/pages/html/BackgroundEffect/index.tsx b/src/pages/html/BackgroundEffect/index.tsx
@@ -7,7 +7,7 @@ import GridContent from "components/GridContent";
 import styles from "./index.module.scss";
 
 const { GridBox } = GridContent;
-const gridboxList = new Array(29).fill("1");
+const gridboxList = new Array(34).fill("1");
 
 const BackgroundEffect = () => {
   const { setScrollTop } = useGlobalContext();