vue项目实现动效交互---lottie动画库

npm i lottie

<script>
import dropboxDxJson from "@/assets/gif/drop-box-dx.json"; // 导入动效 JSON 文件
import lottie from "lottie-web";
export default {components: {lottie,},
.....
</script>

<template><div class="dx-drop-static-box" ></div>
</template>
<style scoped>.dx-drop-static-box {position: absolute;top: -1rem;left: 0;width: 100%;height: 100%;z-index: 99;} 
</style>

  mounted() {this.lottie = lottie.loadAnimation({container: document.querySelector(".dx-drop-static-box"), // 动画容器renderer: "svg", // 渲染器类型，可以选择 'svg' 或 'html'loop: true, // 是否循环播放autoplay: true, // 是否自动播放animationData: dropboxDxJson, // JSON 文件的路径});}