gitGrassGIF

src/components/GrassGIF.vue

 <template>
   <div :style="HomeStyle" class="grassBox">
-    <img :src="grass1" class="flex" />
-    <img :src="grass2" />
-    <img :src="grass3" />
-    <img :src="grass4" />
+    <img :src="grass1" class="grass1" />
+    <img :src="grass2" class="grass2" />
+    <img :src="grass3" class="grass3" />
+    <img :src="grass4" class="grass4" />
   </div>
 </template>
 
 .grassBox {
   width: 100%;
   height: 21vh;
-  .flex {
-    transform: rotate(9deg);
+  .grass1 {
+    width: 17%;
+    transform: rotate(7deg);
     position: relative;
-    left: 64vw;
-    top: -2vh;
+    left: 68vw;
+    top: 10vh;
+    animation: movegrass1 4s linear infinite;
   }
+  .grass2 {
+    width: 11%;
+    transform: rotate(-8deg);
+    position: relative;
+    left: 60vw;
+    top: 6vh;
+    animation: movegrass2 3.4s linear infinite;
+  }
+  .grass3 {
+    width: 10%;
+    transform: rotate(-13deg);
+    position: relative;
+    left: 56vw;
+    top: 3vh;
+    animation: movegrass3 3s linear infinite;
+  }
+  .grass4 {
+    width: 9%;
+    transform: rotate(-28deg);
+    position: relative;
+    right: -49vw;
+    top: 11vh;
+    animation: movegrass4 2s linear infinite;
+  }
+}
+
+@-webkit-keyframes movegrass1 {
+  0% {
+    transform: rotate(15deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(15deg);
+  }
+}
+@-webkit-keyframes movegrass2 {
+  0% {
+    transform: rotate(-10deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-10deg);
+  }
+}
+@-webkit-keyframes movegrass3 {
+  0% {
+    transform: rotate(-10deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-10deg);
+  }
+}
+@-webkit-keyframes movegrass4 {
+  // 0% {
+  //   transform: rotate(20deg);
+  // }
+  // 50% {
+  //   transform: rotate(0deg);
+  // }
+  // 100% {
+  //   transform: rotate(20deg);
+  // }
 }
 </style>

src/pages/homePage.vue

 
     const linkTo = () => {
       // 字符串路径
+
       // router.push('/about')
 
       // 带有路径的对象