03.可视化大屏分解动画

<template>
  <div class="box">
    <div class="base base1"></div>
    <div class="cabinet cabinet4"></div>
  </div>
</template>

<style scoped lang="less">
.box {
  position: absolute;
}
.base {
  position: fixed;
  height: 36%;
  width: 13%;
  background-image: url(../assets/images2/mount.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.base1 {
  top: 399px;
  left: 166px;
}
.cabinet {
  position: fixed;
  height: 20%;
  width: 7%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.cabinet4 {
  height: 20%;
  width: 6%;
  top: 330px;
  left: 208px;
  background-image: url(../assets/images2/cabinet-4.png);
  animation: ease 2s ease-in-out infinite alternate;
}

@keyframes ease {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 8px); // 左右 上下悬浮
  }
}
</style>