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

本贴最后更新于 2166 天前,其中的信息可能已经水流花落

# 前言

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

# 引入框架

<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; //设置堆叠顺序,将视频放置在堆叠的最下层
}

# 网页效果


# 结语

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

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • PeterChu

    哈哈,我是做个网页中某一栏元素用视频做背景,视频文件大小在 6mb 以下,正常网速访问加载速度还在可接受范围之内。

  • someone

    咦?你是 OnMy22 吗?😱