首页文字---特效

front/package.json

@@ -18,6 +18,7 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@element-plus/icons-vue": "^2.0.1",
     "@turf/turf": "^6.5.0",
+    "animate.css": "^4.1.1",
     "ant-design-vue": "^3.1.0-rc.5",
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",

front/src/main.js

@@ -21,6 +21,7 @@ import 'vue3-video-play-emiyagm/dist/style.css' // 引入css
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import animate from 'animate.css'
 /**
  * @author chuzhixin 1204505056@qq.com
  * @description 正式环境默认使用mock，正式项目记得注释后再打包
@@ -42,6 +43,7 @@ app
   .use(Antd)
   .use(ElementPlus)
   .mount('#app')
+  .use(animate)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }

front/src/views/newHome/components/Navigation.vue

@@ -147,6 +147,9 @@
         </div>
       </div>
     </div>
+    <div class="imgBox tracking-in-expand">
+      <img src="~@/assets/newHome/slogan.png" />
+    </div>
   </div>
 </template>
 <script setup>
@@ -291,9 +294,10 @@
 </script>
 <style lang="less" scoped>
   .navigation {
-    height: 4.8rem;
+    height: 5.8rem;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    // justify-content: center;
     align-items: center;
     background: url('~@/assets/newHome/banner-main.jpg') no-repeat;
     background-size: cover;
@@ -306,6 +310,7 @@
       background: rgba(255, 255, 255, 0.18);
       padding: 0.2rem 0.4rem;
       border-radius: 0.02rem;
+      margin-top: 1.36rem;
       .top {
         display: flex;
         justify-content: flex-start;
@@ -387,6 +392,7 @@
       background: rgba(255, 255, 255, 0.18);
       padding: 0.24rem 0.2rem;
       border-radius: 0.02rem;
+      margin-top: 1.36rem;
       .gaoji-top {
         width: 8.7rem;
         display: flex;
@@ -482,6 +488,55 @@
         }
       }
     }
+    .imgBox {
+      width: 8rem;
+      margin-top: 0.18rem;
+      img {
+        width: 100%;
+      }
+    }
+    .tracking-in-expand {
+      -webkit-animation: tracking-in-expand 0.7s
+        cubic-bezier(0.215, 0.61, 0.355, 1) both;
+      animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1)
+        both;
+    }
+    /* ----------------------------------------------
+ * Generated by Animista on 2022-8-15 14:3:51
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+    /**
+ * ----------------------------------------
+ * animation tracking-in-expand
+ * ----------------------------------------
+ */
+    @-webkit-keyframes tracking-in-expand {
+      0% {
+        letter-spacing: -0.5em;
+        opacity: 0;
+      }
+      40% {
+        opacity: 0.6;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    @keyframes tracking-in-expand {
+      0% {
+        letter-spacing: -0.5em;
+        opacity: 0;
+      }
+      40% {
+        opacity: 0.6;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
   }
 </style>
 <style>

front/src/views/newHome/components/Navigation2.vue

@@ -132,7 +132,7 @@
     box-shadow: 0.05rem 0.05rem 0.1rem #ccc;
     padding: 0 1.5rem;
     position: absolute;
-    top: 4rem;
+    top: 5rem;
     left: 3rem;
     .item {
       display: flex;