福利中心 动效

src/widgets/WWelfarebar/index.jsx

@@ -1,5 +1,5 @@
 import styles from './styles.module.scss';
-import {useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import {reqFirstPayConfig, reqProtectCheck} from "@features/api";
 import {useDispatch, useSelector} from "react-redux";
 import {getFirstBonus, getOpenRelief, getPopBindPhone, getUserInfo} from "@features/mainSlice";
@@ -62,6 +62,7 @@ const WWelfarebar = () => {
     const {welfTabState,isMobile}=useThemeProvider();
     const {open} = useSidebar();
     const {pathname} = useLocation();
+    const starPRef=useRef(null);
     const getWelfTabState=(key)=>{
         if (welfTabState===key)return true;
         return false;
@@ -168,6 +169,7 @@ const WWelfarebar = () => {
         if (pathname.startsWith(ROUTE_PATH.SPORTS)){
             isClose=true;
         }
+        const stars=Array.from({ length: 5 }, (_, index) => index);
         return (
             <div className={`${styles.container} ${extra}`}>
                 <div className={`${styles.content} ${isClose?styles.content_close:''}`}>
@@ -175,19 +177,37 @@ const WWelfarebar = () => {
                                 onClick={() => {
                                     global.showProtectReward();
                                 }}>
-                        <img className={styles.wlf_protect} src={require("@assets/welfare/fundos_"+i18n.language+".png")}/>
+                        <div className={styles.wlf_protect}>
+                            <img src={require("@assets/welfare/fundos_" + i18n.language + ".png")}/>
+                            <div ref={starPRef} className={styles.p_stars}>
+                                {
+                                    stars.map((item,index)=>{
+                                        return (
+                                            <div key={index} className={`${styles.star} ${styles['star_ani_'+index]}`}></div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        </div>
                     </WelfareBtn>
                     <WelfareBtn key={"first_pay"} open={openFirst} pressDown={getWelfTabState(APP_WELFARE.FIRST_PAY)}
                                 onClick={() => {
                                     global.showFirstPay();
                                 }}>
-                        <img className={styles.wlf_first} src={require("@assets/welfare/first_"+i18n.language+".png")}/>
+                        <div className={styles.wlf_first}>
+                            <div className={styles.wlf_first_mask} style={{
+                                webkitMask:`url(${require("@assets/welfare/first.png")}) 0 0/100%`
+                            }}>
+                                <img className={styles.f_img} src={require("@assets/welfare/first.png")}/>
+                            </div>
+                            <img className={styles.f_txt} src={require("@assets/welfare/first_"+i18n.language+".png")}/>
+                        </div>
                     </WelfareBtn>
                     <WelfareBtn key={"bind"} open={openBind} pressDown={getWelfTabState(APP_WELFARE.BIND)}
                                 onClick={() => {
                                     global.showBindPhone();
                                 }}>
-                        <img className={styles.wlf_bind} src={require("@assets/welfare/veri_"+i18n.language+".png")}/>
+                        <img className={`${styles.wlf_bind} iconshake`} src={require("@assets/welfare/veri_"+i18n.language+".png")}/>
                     </WelfareBtn>
                 </div>
             </div>

src/widgets/WWelfarebar/styles.module.scss

@@ -1,5 +1,8 @@
 $leftb:"./../../assets/welfare/leftb.png";
 $leftb_1:"./../../assets/welfare/leftb_1.png";
+$star:"./../../assets/welfare/star.png";
+
+
 .container{
   display: flex;
   flex-direction: column;
@@ -46,18 +49,146 @@ $leftb_1:"./../../assets/welfare/leftb_1.png";
   }
 }
 .wlf_protect{
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 5rem;
   height: auto;
   margin-left: 0.5rem;
   margin-top: 0.1rem;
+  position: relative;
+  & .p_img{
+    width: 100%;
+    height: auto;
+  }
+  & .p_stars{
+    top: -1rem;
+    left: 0rem;
+    right: 1.4rem;
+    bottom: 1.2rem;
+    position: absolute;
+  }
 }
 .wlf_first{
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 3.2rem;
-  height: auto;
+  aspect-ratio: 91/115;
   margin-left: -0.5rem;
+  position: relative;
+  &_mask{
+    width: 3.2rem;
+    aspect-ratio: 84/86;
+    flex-shrink: 0;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    &:after{
+      content: '';
+      position: absolute;
+      inset: -20%;
+      background: linear-gradient(-45deg, rgba(255,255,255,0) 45%, rgb(255,255,255,1), rgba(255,255,255,0) 60%);
+      animation: shark-wrap 3s infinite;
+      transform: translateX(-100%);
+      mix-blend-mode: overlay;
+    }
+  }
+  & .f_img{
+    width: 3.2rem;
+    height: auto;
+  }
+  & .f_txt{
+    position: absolute;
+    z-index: 2;
+    height: 1.52rem;
+    width: auto;
+    top: 2.6rem;
+  }
 }
 .wlf_bind{
   width: 3.5rem;
   height: auto;
   margin-left: -0.5rem;
+}
+@keyframes shark-wrap {
+  to {
+    transform: translateX(100%);
+  }
+}
+.star{
+  position: absolute;
+  width: 1rem;
+  aspect-ratio: 23/28;
+  background: url($star) no-repeat;
+  background-size: 100% 100%;
+  opacity: 0;
+}
+.star_ani_0{
+  top: 1rem;
+  left: 1rem;
+  width: 0.45rem;
+  animation: blinking_1 3s linear infinite;
+}
+.star_ani_1{
+  width: 0.6rem;
+  top: 2.2rem;
+  right: 1rem;
+  animation: blinking_2 6.5s linear infinite;
+}
+.star_ani_2{
+  width: 0.4rem;
+  top: 2.8rem;
+  right: 0.5rem;
+  animation: blinking_2 4.5s linear infinite;
+}
+.star_ani_3{
+  width: 0.35rem;
+  top: 3rem;
+  right: -0.5rem;
+  animation: blinking_1 3.5s linear infinite;
+}
+.star_ani_4{
+  width: 0.4rem;
+  top: 1rem;
+  right: 0rem;
+  animation: blinking_2 5.5s linear infinite;
+}
+@keyframes blinking{
+  0%,100%{
+    transform: scale(1);
+    opacity: 0;
+  }
+  50%{
+    transform: scale(1.5);
+    opacity: 1;
+  }
+}
+@keyframes blinking_1{
+  0%,25%{
+    transform: scale(1);
+    opacity: 0;
+  }
+  50%{
+    transform: scale(1.5);
+    opacity: 1;
+  }
+  75%,100%{
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes blinking_2{
+  0%,33%{
+    transform: scale(1);
+    opacity: 0;
+  }
+  50%{
+    transform: scale(1.5);
+    opacity: 1;
+  }
+  66%,100%{
+    transform: scale(1);
+    opacity: 0;
+  }
 }