feats

src/App.vue

@@ -24,7 +24,7 @@ onMounted(() => {
 <template>
   <Loader :loading="loading" :percent="percent" />
   <ScrollDown />
-  <Image v-for="res in resources" :key="res.image" :resource="res"></Image>
+  <Image v-for="(res, inx) in resources" :key="res.image" :resource="res" :show-fog="inx === 0"></Image>
 </template>
 
 <style scoped>

src/components/Fog.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="fog-box">
+    <div class="fog"></div>
+    <svg width="0" height="0" >
+      <filter id="steam">
+        <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
+        <feDisplacementMap in="SourceGraphic" scale="180" />
+      </filter>
+    </svg>
+  </div>
+</template>
+
+<style lang="less" scoped>
+
+@fog-color: #787F78;
+@fog-last-time: 20s;
+
+.fog-box {
+  position: absolute;
+  z-index: 20;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  // overflow-y: hidden;
+
+  .fog{
+    position: absolute;
+    top: -400px;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-shadow: -156px 492px 123px -252px @fog-color;
+    filter: url(#steam);
+    min-width: 600px;
+    min-height: 600px;
+    animation-name: fogAnimation;
+    animation-duration: @fog-last-time;
+    animation-direction: normal;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+    will-change: transform, opacity;
+  }
+
+  @keyframes fogAnimation {
+    0%{
+      transform: translate(-20%, -20%);
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100%{
+      transform: translate(60%, -40%);
+      opacity: 0;
+    }
+  }
+}
+
+</style>

src/components/Image.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="img-wrapper">
+    <Fog v-if="showFog" />
     <img :src="resource.img.src" @load="onLoad" alt="">
     <div v-if="resource.playBtn" class="paybtn" :style="btnStyle" @click="onPlayBtn">
       <AudioPlayingVue :style="iconStyle" />
@@ -11,13 +12,17 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
 import { useModel } from '@zjxpcyc/vue-tiny-store';
+import Fog from './Fog.vue';
 import AudioPlayingVue from './AudioPlaying.vue';
 
 const [current, updateCurrent] = useModel('audio');
 
 const props = defineProps({
-  resource: Object,
-  default: () => ({})
+  resource: {
+    type: Object,
+    default: () => ({})
+  },
+  showFog: Boolean,
 });
 
 const btnStyle = ref({});