lottie 动画使用

lottie 官网：

https://app.lottiefiles.comhttps://app.lottiefiles.com

选择动画

未下载过

已下载过

点击download

保存到自己的工作空间后，可获取lottie文件

使用vue

 

点击后获取代码

第一步，项目中加载模块

npm install @lottiefiles/dotlottie-vue

第二部，组件中使用资源 

<script setup>
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
</script><template><DotLottieVue style="height: 500px; width: 500px" autoplay loop src="资源路径" />
</template>

注意事项

        资源路径放到src外层的public中，否则获取不到。