数据可视化大屏项目中，为了页面更加酷炫会更加背景动画效果，为了背景更加酷炫，我们会用视频来作为页面背景。

如果您需要定制动态背景效果 请联系我们微信:17331886870

背景由动态齿轮以及动态线条组成。

视频背景资源应用

作为登录页动态背景或者数据可视化大屏动态背景。

项目应用代码实例

在视频用作背景的时候，可能会出现背景视频无法铺满的问题，这里提供一下代码实例供大家参考。
这里通过css屏蔽掉视频播放按钮，并设置视频自动循环播放。通过css object-fit: fill让视频铺满全屏。

<template>
  <div class="videoBg">
    <video id="video" loop="true" muted class="videoBg" autoplay="autoplay" controls="controls">
      <source src="./assets/bg.mp4" type="video/mp4"/>
    </video>
  </div>
</template>

<script>
export default {
  name: "videoBg"
}
</script>

<style lang="scss">
.videoBg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  object-fit: fill;
  z-index: -1;
  top: 0;
  left: 0;
  //屏蔽播放按钮
  video::-webkit-media-controls {
    display: none !important;
  }
}
</style>

视频背景资源下载