Merge pull request #244 from hepengwei/feat_he

新增堆叠图片的悬停效果

src/locale/en-US.js

@@ -200,6 +200,8 @@ const en_US = {
   "page.htmlVision.interactiveDesign.personalArticle": "Personal Article",
   "page.htmlVision.interactiveDesign.autoCompletePunctuation":
     "Automatically complete the punctuation input box",
+  "page.htmlVision.interactiveDesign.stackedImages":
+    "Hover effect for stacked images",
 
   // Html视觉-实用功能页
   "page.htmlVision.utilitarianFunction.operatingShears": "Operating Shears",

src/locale/zh-CN.js

@@ -179,6 +179,7 @@ const zh_CN = {
   "page.htmlVision.interactiveDesign.personalArticle": "个人文章",
   "page.htmlVision.interactiveDesign.autoCompletePunctuation":
     "自动补全标点输入框",
+  "page.htmlVision.interactiveDesign.stackedImages": "堆叠图片的悬停效果",
 
   // Html视觉-实用功能页
   "page.htmlVision.utilitarianFunction.operatingShears": "操作剪切板",

src/pages/html/InteractiveDesign/components/StackedImages/index.module.scss

@@ -0,0 +1,61 @@
+.container {
+  width: 100%;
+  height: 440px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  place-content: center;
+  display: grid;
+
+  .content {
+    --img-width: 150px; // 图片的宽高
+    --border-width: 1px; // 图片的边框宽度
+    $borderColor: #fff; // 图片的边框颜色
+    $imgGap: 12px; // 每个图片的边缘间隔
+    width: calc(100% + 4 * var(--border-width));
+    height: calc(var(--img-width) * 1.7 + 4 * var(--border-width));
+    padding: calc(2 * var(--border-width));
+    display: flex;
+    align-items: flex-end;
+    overflow: hidden;
+    gap: $imgGap;
+    filter: drop-shadow(0 0 var(--border-width) $borderColor)
+      drop-shadow(0 0 var(--border-width) $borderColor)
+      drop-shadow(0 0 $borderColor) drop-shadow(0 0 $borderColor);
+
+    $imgOverlap: 30px; // 每个图片重叠部分的宽
+    img {
+      --h: 0px;
+      --t: 0px;
+      height: var(--img-width);
+      aspect-ratio: 1;
+      border-radius: 50%;
+      border-block: calc(var(--img-width)) solid $borderColor;
+      margin-block: calc(-1 * var(--img-width));
+      cursor: pointer;
+      -webkit-mask: radial-gradient(0 0 at 0 0, #0000 0, #000 0) padding-box;
+      translate: 0 var(--t);
+      // transition: --h 1s, --t 1s;
+
+      &:not(:last-child) {
+        margin-right: calc(-1 * $imgOverlap);
+        -webkit-mask: radial-gradient(
+            50% 50% at calc(150% + $imgGap - $imgOverlap) calc(50% - var(--h)),
+            #0000 calc(100% + $imgGap),
+            #000 calc(101% + $imgGap)
+          )
+          padding-box;
+      }
+
+      &:hover {
+        --h: calc(-0.7 * var(--img-width));
+        --t: calc(-0.7 * var(--img-width));
+      }
+
+      &:has(+ img:hover) {
+        --h: calc(0.7 * var(--img-width));
+      }
+    }
+  }
+}

src/pages/html/InteractiveDesign/components/StackedImages/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import ModuleTitle from "@/components/ModuleTitle";
+import scenery1 from "images/html/scenery1.jpg";
+import scenery4 from "images/html/scenery4.jpg";
+import scenery5 from "images/html/scenery5.jpg";
+import scenery6 from "images/html/scenery6.jpg";
+import styles from "./index.module.scss";
+
+const imgList = [scenery1, scenery4, scenery5, scenery6];
+
+const StackedImages = () => {
+  return (
+    <div className={styles.container}>
+      <ModuleTitle intlTitle="page.htmlVision.interactiveDesign.stackedImages" />
+      <div className={styles.content}>
+        {imgList.map((item: string, index: number) => (
+          <img src={item} alt="" key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default StackedImages;

src/pages/html/InteractiveDesign/index.tsx

@@ -23,6 +23,7 @@ import HexagonalMesh3 from "./components/HexagonalMesh3";
 import IconScroll from "./components/IconScroll";
 import WipeSwitchover from "./components/WipeSwitchover";
 import AutoCompletePunctuation from "./components/AutoCompletePunctuation";
+import StackedImages from "./components/StackedImages";
 import styles from "./index.module.scss";
 
 const boxList = [
@@ -50,6 +51,7 @@ const boxList = [
   },
   { element: <WipeSwitchover /> },
   { element: <AutoCompletePunctuation /> },
+  { element: <StackedImages /> },
 ];
 
 const InteractiveDesign = () => {