数据大屏标题加载顶部流光

实现效果(这是gif格式，实际比这清晰)

HTML部分

<div id="lottie"></div>

Js部分

import lottie from 'lottie-web';//需要npm i lottie-web
import animationJson from '@/views/InnerLink/largeScreen_img/纯光.json';//引入json文件
export default {
  mounted() {
    //加载流光
    this.loadAnimation();
  }
  methods: {
    //加载流光
    loadAnimation() {
      let params = {
        container: document.getElementById('lottie'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationJson
      };
      lottie.loadAnimation(params);
    }
  }
}

CSS部分

#lottie {
  width: 100%;
  display: block;
  overflow: hidden;
  opacity: 1;
  background-image: url("./largeScreen_img/top_title.png");
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  z-index: 13;
}