仿抖音主页：动态背景登陆界面

# 前言

在做物联网系资源管理平台的登陆界面时，发现抖音的主页是视频动态背景，感觉逼格很高，于是从网上学习，模仿做了一个登陆界面。（引入框架，实现方法较简单）

# 引入框架

<link rel="stylesheet" href="vendors/bootstrap-4.0.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/jquery/jquery-3.3.1.min.js">

# 引入 video 文件

/*autoplay属性：设置打开网页就自动播放，loop属性：指定视频无限循环*/
<video src="test/物联网宣传片_超清.mp4" type="video/mp4" autoplay="autoplay" loop="loop" class="video-bg">

# 修改 video 标签样式

video{
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -9999; //设置堆叠顺序，将视频放置在堆叠的最下层
}

# 网页效果

# 结语

在最后的物联网系资源管理平台的登陆界面中，我并没有使用此种方法做视频动态登陆背景。因为把管理平台挂到学院服务器上投入使用时，登陆界面会因为引入外部视频文件较大，影响网页的加载速度。