Merge pull request #263 from hepengwei/feat_he

新增鼠标Hover交互效果4

src/pages/html/InteractiveDesign/components/MouseHover3/card.module.scss

@@ -1,7 +1,7 @@
 .container {
   $borderRadius: 24px;
-  width: 300px;
-  height: 424px;
+  width: 280px;
+  height: 396px;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -6,8 +6,8 @@
   align-items: center;
 
   .content {
-    width: 70%;
-    max-width: 1300px;
+    width: 66%;
+    max-width: 1200px;
     min-width: 900px;
     display: flex;
     justify-content: space-between;

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback } from "react";
+import React from "react";
 import Card from "./Card";
 import car1 from "images/html/car1.png";
 import car2 from "images/html/car2.png";

src/pages/html/InteractiveDesign/components/MouseHover4/Card.tsx

@@ -0,0 +1,115 @@
+import React, { useRef, useEffect, useCallback } from "react";
+import styles from "./card.module.scss";
+
+interface CardProps {
+  url: string;
+}
+
+const SPEED = 36;
+
+const Card = (props: CardProps) => {
+  const { url } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const frameId = useRef<number>(0);
+  const xRef = useRef<number>(0);
+  const yRef = useRef<number>(0);
+
+  const rotateLoop = () => {
+    if (containerRef.current) {
+      const { clientWidth, clientHeight } = containerRef.current;
+      let nextX = xRef.current;
+      let nextY = yRef.current;
+      if (yRef.current <= 0) {
+        if (xRef.current >= clientWidth) {
+          nextX = clientWidth;
+          nextY = SPEED;
+        } else if (nextX + SPEED > clientWidth) {
+          nextY = nextX + SPEED - clientWidth;
+          nextX = clientWidth;
+        } else {
+          nextX += SPEED;
+          nextY = 0;
+        }
+      } else if (xRef.current >= clientWidth) {
+        if (yRef.current >= clientHeight) {
+          nextX = clientWidth - SPEED;
+          nextY = clientHeight;
+        } else if (nextY + SPEED > clientHeight) {
+          nextX = clientWidth - (nextY + SPEED - clientHeight);
+          nextY = clientHeight;
+        } else {
+          nextX = clientWidth;
+          nextY += SPEED;
+        }
+      } else if (yRef.current >= clientHeight) {
+        if (xRef.current <= 0) {
+          nextX = 0;
+          nextY = clientHeight - SPEED;
+        } else if (nextX - SPEED < 0) {
+          nextY = clientHeight - (SPEED - nextX);
+          nextX = 0;
+        } else {
+          nextX -= SPEED;
+          nextY = clientHeight;
+        }
+      } else {
+        if (yRef.current <= 0) {
+          nextX = SPEED;
+          nextY = 0;
+        } else if (nextY - SPEED < 0) {
+          nextX = SPEED - nextY;
+          nextY = 0;
+        } else {
+          nextX = 0;
+          nextY = Math.max(nextY - SPEED, 0);
+        }
+      }
+      xRef.current = nextX;
+      yRef.current = nextY;
+      containerRef.current.setAttribute(
+        "style",
+        `--url: url("${url}"); --x: ${nextX}px; --y: ${nextY}px`
+      );
+      frameId.current = window.requestAnimationFrame(rotateLoop);
+    }
+  };
+
+  const onMouseEnter = useCallback(() => {
+    if (containerRef.current) {
+      frameId.current = window.requestAnimationFrame(rotateLoop);
+    }
+  }, []);
+
+  const onMouseLeave = useCallback(() => {
+    if (containerRef.current) {
+      frameId.current && window.cancelAnimationFrame(frameId.current);
+      containerRef.current.setAttribute(
+        "style",
+        `--url: url("${url}"); --x: 0px; --y: 0px`
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    if (containerRef.current && url) {
+      containerRef.current.setAttribute("style", `--url: url("${url}")`);
+    }
+
+    return () => {
+      frameId.current && window.cancelAnimationFrame(frameId.current);
+    };
+  }, []);
+
+  return (
+    <div
+      className={styles.container}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={containerRef}
+    >
+      <div className={styles.content} />
+    </div>
+  );
+};
+
+export default Card;

src/pages/html/InteractiveDesign/components/MouseHover4/card.module.scss

@@ -0,0 +1,62 @@
+.container {
+  $borderRadius: 24px;
+  width: 280px;
+  height: 396px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: $borderRadius;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: "";
+    opacity: 0;
+    position: absolute;
+    inset: 0;
+    border-radius: $borderRadius;
+    background: conic-gradient(#03a9f4, #e91e63, #9c27b0, #ff5722, #03a9f4);
+    mask: radial-gradient(
+      circle at var(--x) var(--y),
+      #000,
+      #000,
+      transparent,
+      transparent,
+      transparent
+    );
+  }
+
+  &:hover {
+    transform: scale(1.1);
+    &::before {
+      opacity: 1;
+    }
+  }
+
+  .content {
+    border-radius: $borderRadius;
+    overflow: hidden;
+    position: absolute;
+    inset: 3px;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      background: var(--url);
+      background-size: cover;
+      background-position: center;
+      border-radius: $borderRadius;
+    }
+
+    &::before {
+      inset: 0;
+      filter: blur(20px);
+    }
+
+    &::after {
+      inset: 40px;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+.container {
+  width: 100%;
+  height: 560px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .content {
+    width: 66%;
+    max-width: 1200px;
+    min-width: 900px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Card from "./Card";
+import car1 from "images/html/car1.png";
+import car2 from "images/html/car2.png";
+import car3 from "images/html/car3.png";
+import styles from "./index.module.scss";
+
+const cardList = [car1, car2, car3];
+
+const MouseHover4 = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.content}>
+        {cardList.map((url: string, index: number) => (
+          <Card url={url} key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MouseHover4;

src/pages/html/InteractiveDesign/index.tsx

@@ -9,6 +9,7 @@ import DragShopping from "./components/DragShopping";
 import MouseHover1 from "./components/MouseHover1";
 import MouseHover2 from "./components/MouseHover2";
 import MouseHover3 from "./components/MouseHover3";
+import MouseHover4 from "./components/MouseHover4";
 import SlideButtonTab from "./components/SlideButtonTab";
 import FlipBook from "./components/FlipBook";
 import Switchs from "./components/Switchs";
@@ -34,6 +35,7 @@ const boxList = [
   { element: <MouseHover1 /> },
   { element: <MouseHover2 /> },
   { element: <MouseHover3 /> },
+  { element: <MouseHover4 /> },
   { element: <SlideButtonTab /> },
   { element: <FlipBook /> },
   { element: <Switchs /> },