本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果。并且基于 Vue.js 2.0 全家桶。具体效果如下图所示:
最终效果可以翻到文章最后观看。
1. 背景视频 Web 页面的既有实现方式
国外有一个很好的网站 「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示:
教程如下所示:
从图中以及我的实践可以得出以下观点:
该教程使用了 jQuery 。由于我们想要使用 Vue.j
2021-05-11 08:33:20
288KB
js
ue
自适应
1