feats

src/components/BackPage.vue

@@ -7,6 +7,8 @@
       <CloudVue :scale="1.2" top="10vh" />
       <CloudVue :scale="1" top="30vh" right="0" direction="left" :delay="1" />
       <CloudVue :scale="0.8" top="40vh" :delay="1.8" />
+      <LeftGrass />
+      <RightGrass />
       <slot></slot>
       <!-- <div class="GrassGIFBox">
         <GrassGIF />
@@ -18,11 +20,15 @@
 <script >
 import backHome from '@/assets/BackImage/backHome.jpg'
 import CloudVue from '@/components/Cloud.vue'
+import LeftGrass from '@/components/LeftGrass.vue'
+import RightGrass from '@/components/RightGrass.vue'
 
 export default {
   name: 'BackPage',
   components: {
     CloudVue,
+    LeftGrass,
+    RightGrass,
   },
   setup() {
     return {
@@ -36,6 +42,7 @@ export default {
 .index-image {
   height: 100vh;
   overflow: hidden;
+  position: relative;
 
   .bg-image {
     width: 100vw;

src/components/LeftGrass.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="left-grass-box">
+
+  </div>
+</template>
+
+<script setup>
+import grassImage from '@/assets/GrassImage/left-grass.png'
+</script>
+
+<style lang="less" scoped>
+.left-grass-box {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 0;
+}
+</style>

src/components/RightGrass.vue

@@ -1,20 +1,96 @@
 <template>
-  <div class="left-grass">
-    
+  <div class="right-grass-box">
+    <img class="right-grass" :src="grassImage" alt="" style="z-index: 2">
+    <img class="flower-motion flower-1" :src="flower1Image" alt="" style="z-index: 1">
+    <img class="flower-motion flower-2" :src="flower2Image" alt="" style="z-index: 1">
+    <img class="flower-motion flower-3" :src="flower3Image" alt="" style="z-index: 1">
+    <img class="leaf-motion grass-leaf" :src="leafImage" alt="" style="z-index: 3">
   </div>
 </template>
 
 <script setup>
+import grassImage from '@/assets/GrassImage/right-grass.png'
+import flower1Image from '@/assets/GrassImage/flower-1.png'
+import flower2Image from '@/assets/GrassImage/flower-2.png'
+import flower3Image from '@/assets/GrassImage/flower-3.png'
+import leafImage from '@/assets/GrassImage/right-grass-leaf.png'
 
 </script>
 
 <style lang="less" scoped>
-.left-grass {
-  width: 25vw;
-  height: 28vw;
+.right-grass-box {
   position: absolute;
   right: 0;
   bottom: 0;
-  overflow: hidden;
+  z-index: 0;
+
+  & > img {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    will-change: transform;
+  }
+
+  .flower-motion {
+    transform-origin: center bottom;
+    animation-name: windblow;
+    animation-duration: 6s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  .leaf-motion {
+    transform-origin: right bottom;
+    animation-name: windblow2;
+    animation-duration: 6s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes windblow {
+    50% {
+      transform: rotate(-10deg);
+    }
+  }
+  
+  @keyframes windblow2 {
+    50% {
+      transform: rotate(-8deg);
+    }
+  }
+
+  .right-grass {
+    width: 25vw;
+    height: 28vw;
+  }
+
+  .flower-1 {
+    width: 15vw;
+    height: 10vw;
+    right: 13.2vw;
+    bottom: 1vw;
+    animation-delay: 0;
+  }
+
+  .flower-2 {
+    width: 9vw;
+    height: 16.5vw;
+    right: 8vw;
+    bottom: 6vw;
+    animation-delay: 1s;
+  }
+
+  .flower-3 {
+    width: 8.7vw;
+    height: 16vw;
+    right: 3vw;
+    bottom: 14vw;
+    animation-delay: 2s;
+  }
+
+  .grass-leaf {
+    width: 10.7vw;
+    height: 21vw;
+  }
 }
 </style>