feats

src/components/BackPage.vue

@@ -4,7 +4,9 @@
     <!-- :style="HomeStyle" -->
     <div class="index-image">
       <img :src="backHome" class="bg-image" />
-      <CloudVue />
+      <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" />
       <slot></slot>
       <!-- <div class="GrassGIFBox">
         <GrassGIF />

src/components/Cloud.vue

@@ -1,24 +1,83 @@
 <template>
-  <div class="motion-cloud">
-    <img :src="cloudImage" alt="">
+  <div
+    class="motion-cloud"
+    :class="{ ['cloud-left']: 'left' === direction, ['cloud-right']: 'right' === direction }"
+    :style="cloudStyle"
+  >
+    <img
+      :src="cloudImage"
+      alt=""
+      :style="imageStyle"
+    >
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue';
 import cloudImage from '@/assets/BackImage/cloud.png'
-import { onMounted } from 'vue';
 
-onMounted(() => {
-  console.log('---------onMounted-----')
+const props = defineProps({
+  scale: {
+    type: Number,
+    default: 1,
+  },
+  direction: {
+    type: String,
+    default: 'right'
+  },
+  delay: {
+    type: Number,
+    default: 0,
+  },
+  top: {
+    type: String,
+    default: 'auto',
+  },
+  bottom: {
+    type: String,
+    default: 'auto',
+  },
+  left: {
+    type: String,
+    default: 'auto',
+  },
+  right: {
+    type: String,
+    default: 'auto',
+  },
 })
+
+const cloudStyle = computed(() => ({
+  left: props.left,
+  right: props.right,
+  top: props.top,
+  bottom: props.bottom,
+  animationDelay: `${props.delay}s`
+}))
+
+const imageStyle = computed(() => ({
+  transform: `scale(${props.scale})`,
+}))
+
 </script>
 
 <style lang="less" scoped>
 .motion-cloud {
+  position: absolute;
   width: 160px;
-  animation: fadefloat 120s linear infinite;
   animation-fill-mode: forwards;
+  animation-duration: 10s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  opacity: 0;
+
+  &.cloud-left {
+    animation-name: fadefloat, flyleft;
+  }
   
+  &.cloud-right {
+    animation-name: fadefloat, flyright;
+  }
 
   & > img {
     width: 100%;
@@ -26,12 +85,17 @@ onMounted(() => {
 
   @keyframes fadefloat {
     0%, 100% { opacity: 0; }
-    5%, 90% { opacity: 1; }
+    10%, 60% { opacity: 1; }
+  }
+
+  @keyframes flyleft {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
   }
 
-  @keyframes flyfloat {
-    from { transform: translateX(100%) translateZ(0); }
-    to { transform: translateX(-15%) translateZ(0); }
+  @keyframes flyright {
+    from { transform: translateX(0); }
+    to { transform: translateX(50%); }
   }
 }
 </style>