数据可视化大屏项目中,为了页面更加酷炫会更加背景动画效果,为了背景更加酷炫,我们会用视频来作为页面背景。
如果您需要定制动态背景效果 请联系我们微信:17331886870
氤氲的星空背景.
视频分辨率
1920*1080
效果截图
动态效果
视频背景资源应用
作为登录页动态背景或者数据可视化大屏动态背景。
项目应用代码实例
在视频用作背景的时候,可能会出现背景视频无法铺满的问题,这里提供一下代码实例供大家参考。
这里通过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>