vue 动态视频登陆界面简约冷淡风

HTML 代码
JS 代码
css 代码
自定义界面内容
动画

视频背景的登陆界面使用的vue + Coverr 话不多说来看看成品

HTML 代码

<template><div class="homepage-hero-module"><div class="video-container"><div :style="fixStyle" class="filter"></div><video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay"><source src="视频文件路径" type="video/mp4"/>浏览器不支持 video 标签，建议升级浏览器。<source src="视频文件路径" type="video/webm"/>浏览器不支持 video 标签，建议升级浏览器。</video><div class="poster hidden" v-if="!vedioCanPlay"><img :style="fixStyle" src="没有播放时的图片路径" alt=""></div></div></div>
</template>

注意!

在google浏览器里面是禁止视频自动播放的因为google认为这对用户体验不好。
解决方法设置静音播放 muted=‘muted’ 这样就能正常播放了

<video :style="fixStyle" autoplay loop class="fillWidth" muted='muted' v-on:canplay="canplay">

JS 代码

<script>export default {name: 'login',data() {return {vedioCanPlay: false,fixStyle: ''}},methods: {canplay() {this.vedioCanPlay = true}},mounted () {window.onresize = () => {const windowWidth = document.body.clientWidthconst windowHeight = document.body.clientHeightconst windowAspectRatio = windowHeight / windowWidthlet videoWidthlet videoHeightif (windowAspectRatio < 0.5625) {videoWidth = windowWidthvideoHeight = videoWidth * 0.5625this.fixStyle = {height: windowWidth * 0.5625 + 'px',width: windowWidth + 'px','margin-bottom': (windowHeight - videoHeight) / 2 + 'px','margin-left': 'initial'}} else {videoHeight = windowHeightvideoWidth = videoHeight / 0.5625this.fixStyle = {height: windowHeight + 'px',width: windowHeight / 0.5625 + 'px','margin-left': (windowWidth - videoWidth) / 2 + 'px','margin-bottom': 'initial'}}}window.onresize()}}
</script>

css 代码

<style scoped>.homepage-hero-module,.video-container {position: relative;height: 100vh;overflow: hidden;}.video-container .poster img,.video-container video {z-index: 0;position: absolute;}.video-container .filter {z-index: 1;position: absolute;background: rgba(0, 0, 0, 0.4);}
</style>

自定义界面内容

这里只是介绍了视频背景的代码,
如果要在上面加输入框等则在 class="video-container" 容器里加个DIV
并设置css position: absolute z-index: 100
要大于视频背景的优先级不然会被掩盖。

<template><div class="homepage-hero-module"><div>........视频播放代码.......</div>//我们要加上去的组件<div class="box"> ......</div></div>
</template>//css
.box{position: absolute;z-index: 100;width: 100%;height: 100%;}

动画

如果还想添加动画可以用 transition标签包裹详情看看vue 动画

<transition name="fade"><div v-if="show">.... </div>
</transition>//js
<script>
data () {return {show: false}
}
</script>//css
.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;
}

好啦喜欢快去试试吧！

vue 动态视频登陆界面简约冷淡风相关推荐

Vue+elementUI登陆界面实战
Vue 前置知识 1.html 2.css(一般不用css,用sass或less比较多) less sass 3.javascript(vue.React.Axios.ajax) Vue Axios ...
go html vue,[终极巨坑]golang+vue开发日记【三】，登陆界面制作（二）
写在前面本期内容是承接上期已经做好了登陆界面来写的,不过本期是以golang为主,可能需要大家把最基本的语法结构熟悉一下:菜鸟教程.这样的话方便展开,自然而然的,本篇也是直接实战为主.这次需要依赖m ...
炫酷的vue登陆界面2.0
源码:https://download.csdn.net/download/justleavel/79220834 这次的登陆界面十分适合前后端分离数据传送
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(二）---登陆界面功能实现
打开 main.js,这个文件里定义的是整体小程序中会用到的一些功能 (即变量之类),也就是说,只要在这里出现的功能,其它页面可以直接拿来使用.可以把它理解为: 共享单车main ,大家都可以用. ...
【Vue作业]---Vue登录注册界面
1.引言你是否有过相关设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决 ...
nodejs+vue实现登录界面功能（一）
项目描述:一开始进入登录界面,只有登录成功才可以跳转到主页面,已注册但是忘记密码的进入忘记密码页面,找回密码后进入登录界面. 技术选型:nodejs+vue+stylus 界面效果: 切换登录方式手 ...
这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这 ...
【登录异常解决】Ubuntu 输入正确的密码后重新返回到登陆界面
[登录异常解决]Ubuntu 输入正确的密码后重新返回到登陆界面参考文章: (1)[登录异常解决]Ubuntu 输入正确的密码后重新返回到登陆界面 (2)https://www.cnblogs.co ...
描述linux系统从开机到登陆界面的启动过程
简述: 1.开机BIOS自检 2.MBR引导 3.grub引导菜单 4.加载内核kernel 5.启动init进程 6.读取inittab文件,执行rc.sysinit,rc等脚本 7.启动minge ...

vue 动态视频登陆界面简约冷淡风

vue 动态视频登陆界面简约冷淡风

HTML 代码

JS 代码

css 代码

自定义界面内容

动画

vue 动态视频登陆界面简约冷淡风相关推荐

最新文章

热门文章

vue 动态视频登陆界面 简约冷淡风

vue 动态视频登陆界面 简约冷淡风

HTML 代码

JS 代码

css 代码

自定义界面内容

动画

vue 动态视频登陆界面 简约冷淡风相关推荐

最新文章

热门文章

vue 动态视频登陆界面简约冷淡风

vue 动态视频登陆界面简约冷淡风

vue 动态视频登陆界面简约冷淡风相关推荐