exploreStore增加出场动效

src/animations.scss

@@ -44,4 +44,10 @@
   to {
     transform: scale(-4deg)
   }
+}
+
+@keyframes resourceShow {
+  to {
+    transform: scale(1);
+  }
 }

src/forge/projectHome/explore/index.jsx

@@ -137,9 +137,9 @@ function ProjectHomePage(props) {
     <div className="width1600 mb40">
       <div className="homepage-box-title">
         <span className="font-12 homepage-box-title-tag"><img src={img16} width={13} className="mr5"/>技术赋能</span>
-        <div className="font-40 p_h_title mt10">开源软件仓库</div>
-        <div className="font-40 p_h_title">服务可信<span className="p_h_title_text">资源共享</span></div>
-        <div className="font-18 mb40 mt10">汇聚全球顶尖开源力量，构建安全、协同、创新的软件生态</div>
+        <div className="font-40 p_h_title mt10 p_h_title_1">开源软件仓库</div>
+        <div className="font-40 p_h_title p_h_title_2">服务可信<span className="p_h_title_text">资源共享</span></div>
+        <div className="font-18 mb40 mt10 p_h_title_3">汇聚全球顶尖开源力量，构建安全、协同、创新的软件生态</div>
       </div>
       {/* <div className="font-60 p_h_title pt70">·<span className="p_h_title_text">护航菌事数智</span></div> */}
       {/* <div className="font-18 mb40">汇聚全球顶尖开源力量，构建安全、协同、创新的软件生态，赋能菌事数字化转型与智能化升级</div> */}
@@ -165,7 +165,7 @@ function ProjectHomePage(props) {
     </div>
     <div className="homepage_content_v3 pt30">
       <div className="width1600">
-        <div className="AlignCenter">
+        <div className="AlignCenter homepage_content_v3_1">
           <div className="cate_list_box">
             <span className={`font-15 font-bd`}>软件分类：</span>
             {cateList && !!cateList.length && cateList.map(cate => {
@@ -175,7 +175,7 @@ function ProjectHomePage(props) {
           </div>
         </div>
 
-        <div className="df mt25">
+        <div className="df mt25 homepage_content_v3_2">
           {topicsByCateId && !!topicsByCateId.length && <div className="left_cate2 mr25">
             <ul className="topic_ul">
               <li className={!topicId ? 'active' : ''} onClick={() => { setPage(1); setTopicId(undefined) }}>

src/forge/projectHome/explore/index.scss

@@ -1,3 +1,4 @@
+@import '../../../animations.scss';
 .homepage-box {
   font-family: "alibabaReg";
   color: #091221;
@@ -17,6 +18,7 @@
     color:#ffffff;
     background-image:linear-gradient(90.73deg,#816af2 0%,#ac97f9 100%);
     border-radius:10px 0px 10px 0px;
+    animation: bgOpacity .4s linear .56s reverse backwards;
   }
 
   .p_h_title {
@@ -31,11 +33,32 @@
     -webkit-text-fill-color: transparent;
   }
 
+  .p_h_title_1{
+    position: relative;
+    --offsetTop: 26px;
+    animation: itemUp .4s ease-in-out .36s forwards, bgOpacity .4s linear .36s reverse backwards;
+  }
+
+  .p_h_title_2{
+    position: relative;
+    --offsetTop: 26px;
+    animation: itemUp .4s ease-in-out .66s forwards, bgOpacity .4s linear .66s reverse backwards;
+  }
+
+  .p_h_title_3{
+    position: relative;
+    --offsetTop: 26px;
+    animation: itemUp .4s ease-in-out .86s forwards, bgOpacity .4s linear .86s reverse backwards;
+  }
+
   .project_count {
     padding: 0 80px;
     height: 145px;
     background-image: url('../image/bk4.png');
     background-size: 100% 100%;
+    position: relative;
+    --offsetTop: 46px;
+    animation: itemUp .4s ease-in-out 1.16s forwards, bgOpacity .4s linear 1.16s reverse backwards;
 
     .ant-divider-vertical {
       height: 52px;
@@ -54,6 +77,9 @@
     padding: 17px 30px;
     background-image: linear-gradient(145.03deg, #f2e8e9 0%, #f2e8e9 19.38%, #a7b0ff 76.71%, #b3a7ff 100%);
     border-radius: 15px;
+    position: relative;
+    --offsetTop: 46px;
+    animation: itemUp .4s ease-in-out 1.36s forwards, bgOpacity .4s linear 1.36s reverse backwards;
   }
 
   .needApplyBut {
@@ -94,6 +120,10 @@
   .homepage_content_v3 {
     background-image:linear-gradient(179.88deg,#ffffff 0%,rgba(255, 255, 255, 0.62) 16.1%,rgba(255, 255, 255, 0) 100%);
     border-radius: 40px 40px 0 0;
+    transform: scale(0.85);
+    position: relative;
+    --offsetTop: 56px;
+    animation: bgOpacity .8s linear 1.56s reverse backwards, resourceShow 0.8s 1.56s ease-in-out forwards;;
 
     .cate_list_box {
       display: flex;
@@ -351,6 +381,16 @@
       }
     }
   }
+  // .homepage_content_v3_1{
+  //   position: relative;
+  //   --offsetTop: 66px;
+  //   animation: itemUp .4s ease-in-out 1.86s forwards, bgOpacity .4s linear 1.86s reverse backwards;
+  // }
+  // .homepage_content_v3_2{
+  //   position: relative;
+  //   --offsetTop: 66px;
+  //   animation: itemUp .4s ease-in-out 2s forwards, bgOpacity .4s linear 2s reverse backwards;
+  // }
 }
 .tipByCate_Popover_box{
   position: relative;

src/forge/projectHome/projectList/index.jsx

@@ -151,7 +151,7 @@ function ProjectList() {
           {i.topics && <div className='proListTopics df mb15'>
             {i.topics.map(item => <Tooltip title={item.name}><Link to={`/explore/topic/${item.id}/${encodeURIComponent(item.name)}`} className='proListTopic task-hide'>{item.name}</Link></Tooltip>)}
           </div>}
-          <Link to={url}><div className="task-hide font-22" title={i.name}>{author.name}/{i.name}</div></Link>
+          <Link to={url}><div className="task-hide font-22 project_list_top_item_title" title={i.name}>{author.name}/{i.name}</div></Link>
           {i.description && <Tooltip title={i.description}>
             <div className="task-hide font-15 opacity8 mt5">
               {i.description}

src/forge/projectHome/projectList/index.scss

@@ -2,7 +2,7 @@
 .project_home {
   font-family: "alibabaReg";
   color: #091221;
-  background-color: #f1f6fd;
+  background-color: #F3F9FE;
   background-image: url('../image/bk1.png');
   background-size: 100% auto;
   background-repeat: no-repeat;
@@ -241,6 +241,7 @@
     padding: 30px;
     background-image: url('../image/pro_item1.png');
     background-size: 100% 100%;
+    border-radius: 15px;
     overflow: hidden;
 
     &:nth-of-type(3n+1),
@@ -250,10 +251,16 @@
 
     &:nth-of-type(3n+2) {
       background-image: url('../image/pro_item2.png');
+      &:hover .project_list_top_item_title{
+        color: #2149d4;
+      }
     }
 
     &:nth-of-type(3n+3) {
       background-image: url('../image/pro_item3.png');
+      &:hover .project_list_top_item_title{
+        color: #2149d4;
+      }
     }
 
     .proListTopics {
@@ -273,6 +280,11 @@
       height: 0.8em;
       background-color: #d8d8d8;
     }
+    &:hover{
+      transition: background-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      background-position: center;
+      background-size: 105% 105%;
+    }
   }
 }