fix: free导航增加跳动动画

src/api/home.ts

@@ -29,6 +29,8 @@ export interface GroupType {
     bet_type: 1 | 2 | 3;
 
     image: string;
+
+    isAnimation?: boolean;
 }
 
 /**

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeTabs.tsx

@@ -19,6 +19,7 @@ const buttonGroup = [
         url: "/freeGames",
         locale: true,
         lock: false,
+        isAnimation: true,
         image: "/home/free.png",
     },
     {
@@ -113,7 +114,15 @@ const TabItem = ({
         <div className={rootCls} onClick={() => handler(item)}>
             <div className="flex h-[.55rem] items-end justify-center">
                 {!item.image && <span className={cls}></span>}
-                {item.image && <img src={item.image} width={45} height={55} alt={item.url}></img>}
+                {item.image && (
+                    <img
+                        src={item.image}
+                        width={45}
+                        height={55}
+                        alt={item.url}
+                        className={clsx(item.isAnimation ? "animate-slow-bounce" : "")}
+                    ></img>
+                )}
             </div>
 
             <span className={"break-word truncate whitespace-normal text-center text-[0.13rem]"}>

tailwind.config.ts

@@ -4,7 +4,6 @@ const MAX_WIDTH = 1440;
 const toRem = (px: number) => {
     return `${((4 * px) / (MAX_WIDTH / 10)).toFixed(2)}rem`;
 };
-
 const keyframes = {
     "slow-bounce": {
         "0%,100%": {
@@ -17,6 +16,24 @@ const keyframes = {
             animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
         },
     },
+
+    shake: {
+        "10%,90% ": {
+            transform: "translate3d(-1px, 0, 0) rotate(-1deg)",
+        },
+        "20%,80%": {
+            transform: "translate3d(2px, 0, 0) rotate(1deg)",
+        },
+        "30%,70%": {
+            transform: "translate3d(-3px, 0, 0) rotate(-3deg)",
+        },
+        "40%,60%": {
+            transform: "translate3d(3px, 0, 0) rotate(1deg)",
+        },
+        "50%": {
+            transform: "translate3d(-3px, 0, 0) rotate(3deg)",
+        },
+    },
 };
 const size: any = Array.from({ length: 100 }).reduce((map: any, _, index) => {
     map[index] = toRem(index);
@@ -51,6 +68,7 @@ const config: Config = {
 
             animation: {
                 "slow-bounce": "slow-bounce   1s linear infinite",
+                "slow-shake": "shake 0.8s ease-in-out infinite",
             },
         },
         colors: {