feats

src/components/LeftGrass.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="left-grass-box">
-
+    <img class="left-grass" :src="grassImage" alt="">
+    <img class="flower-motion flower-1" :src="flower1Image" alt="">
+    <img class="flower-motion flower-2" :src="flower2Image" alt="">
+    <img class="leaf-motion grass-leaf" :src="leafImage" alt="">
   </div>
 </template>
 
 <script setup>
 import grassImage from '@/assets/GrassImage/left-grass.png'
+import flower1Image from '@/assets/GrassImage/left-flower-1.png'
+import flower2Image from '@/assets/GrassImage/left-flower-2.png'
+import leafImage from '@/assets/GrassImage/left-leaf-1.png'
 </script>
 
 <style lang="less" scoped>
@@ -14,5 +20,66 @@ import grassImage from '@/assets/GrassImage/left-grass.png'
   left: 0;
   bottom: 0;
   z-index: 0;
+  
+  & > img {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    will-change: transform;
+  }
+  
+  .flower-motion {
+    transform-origin: left bottom;
+    animation-name: windblow;
+    animation-duration: 6s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  .leaf-motion {
+    transform-origin: left 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);
+    }
+  }
+
+  .left-grass {
+    width: 52.5vw;
+    height: 43.4vw;
+  }
+
+  .flower-1 {
+    width: 9.5vw;
+    height: 13vw;
+    left: 11.5vw;
+    bottom: 13.5vw;
+  }
+
+  .flower-2 {
+    width: 7.3vw;
+    height: 11.2vw;
+    left: 32vw;
+    bottom: -1vw;
+  }
+
+  .grass-leaf {
+    width: 30vw;
+    height: 13.4vw;
+    left: 10vw;
+    bottom: 8.6vw;
+  }
 }
 </style>