# 前言
在做物联网系资源管理平台的登陆界面时,发现抖音的主页是视频动态背景,感觉逼格很高,于是从网上学习,模仿做了一个登陆界面。(引入框架,实现方法较简单)
# 引入框架
<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; //设置堆叠顺序,将视频放置在堆叠的最下层
}
# 网页效果
# 结语
在最后的物联网系资源管理平台的登陆界面中,我并没有使用此种方法做视频动态登陆背景。因为把管理平台挂到学院服务器上投入使用时,登陆界面会因为引入外部视频文件较大,影响网页的加载速度。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于