sfgdj-web/src/views/components/bgTools.vue

<template>
  <div class="tools" :style="{ transform: `scale(${scaleVal})` }">
    <img class="bg_bottom" src="@/assets/images/bg_tools/bottom.png" alt="" />
    <img class="bg_main" src="@/assets/images/bg_tools/main.png" alt="" />
    <img class="bg_line1" src="@/assets/images/bg_tools/line1.png" alt="" />
    <img class="bg_line2" src="@/assets/images/bg_tools/line2.png" alt="" />
    <img class="bg_item1" src="@/assets/images/bg_tools/item1.png" alt="" />
    <img class="bg_item2" src="@/assets/images/bg_tools/item2.png" alt="" />
    <img class="bg_item3" src="@/assets/images/bg_tools/item3.png" alt="" />
    <img class="bg_item4" src="@/assets/images/bg_tools/item4.png" alt="" />
    <img class="bg_gear" src="@/assets/images/bg_tools/bg_gear.png" alt="" />
    <img class="bg_wrench" src="@/assets/images/bg_tools/bg_wrench.png" alt="" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const scaleVal = ref(1)
watch(
  width,
  (value) => {
    scaleVal.value = value / 1900 < 0.32 ? 0.32 : value / 1900
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
.tools {
  width: 1124px;
  height: 1080px;
  position: relative;
  .bg_123 {
    width: 100%;
    height: 100%;
  }
  .bg_main {
    position: absolute;
    left: 264px;
    top: 160px;
    animation: slide-top-down 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) alternate infinite;
    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
  }
  .bg_bottom {
    position: absolute;
    left: 189px;
    top: 366px;
    animation: scale_bottom 8s linear infinite;
    // animation: heartBeat;
    // animation-duration: 6s;
    // animation-iteration-count: infinite;
  }
  .bg_line1 {
    position: absolute;
    left: 210px;
    top: 320px;
    animation: slide-top-down2 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) -4s alternate infinite;
    filter: drop-shadow(4px -4px 12px rgba(18, 108, 242, 0.6));
  }
  .bg_line2 {
    position: absolute;
    left: 530px;
    top: 243px;
    animation: slide-top-down3 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) -4s alternate infinite;
    filter: drop-shadow(4px -4px 12px rgba(232, 233, 235, 0.6));
  }
  .bg_item1 {
    position: absolute;
    left: 642px;
    top: 580px;
    animation: bounceInDown;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: -0.5s;
    filter: drop-shadow(4px -4px 12px rgba(18, 108, 242, 0.6));
  }
  .bg_item2 {
    position: absolute;
    left: 840px;
    top: 80px;
    animation: bounceInDown;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: -1s;
    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
  }
  .bg_item3 {
    position: absolute;
    left: 538px;
    top: 752px;
    animation: bounceInDown;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: -1.5s;
    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
  }
  .bg_item4 {
    position: absolute;
    left: 251px;
    top: 124px;
    animation: bounceInDown;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: -2s;
    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
  }
  .bg_gear {
    width: 28%;
    height: 28%;
    position: absolute;
    right: 80px;
    bottom: 280px;
    animation: swing;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 45.5% 44%;
    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
  }
  .bg_wrench {
    width: 48%;
    height: 48%;
    position: absolute;
    left: 24px;
    bottom: 100px;
    animation: swing;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
  }
}
@keyframes slide-top-down {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes slide-top-down2 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(80px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes slide-top-down3 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(120px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes scale_bottom {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(0.85);
  }
  20% {
    transform: scale(0.95);
  }
  28% {
    transform: scale(1.08);
  }
  32% {
    transform: scale(0.95);
  }
  36% {
    transform: scale(1.05);
  }
  40% {
    transform: scale(1.1);
  }
  45% {
    transform: scale(1.15);
  }
  50% {
    transform: scale(1.2);
  }
  55% {
    transform: scale(1.15);
  }
  60% {
    transform: scale(1.1);
  }
  65% {
    transform: scale(1);
  }
  70% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.9);
  }
  90% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
</style>