vue做网页开场视频的实例代码
|
<p style="text-align: center"> <img id="theimg" src="https://files.52php.cn/file_images/article/201710/201710201610.png?2017920161152" style="font-size: 12px; border-top: 0px; font-family: "Microsoft Yahei",simsun,arial,sans-serif; border-right: 0px; white-space: normal; word-spacing: 0px; border-bottom: 0px; text-transform: none; font-weight: normal; color: rgb(51,51,51); padding-bottom: 0px; font-style: normal; text-align: left; padding-top: 0px; padding-left: 0px; margin: 0px; border-left: 0px; orphans: 2; widows: 2; letter-spacing: normal; padding-right: 0px; background-color: rgb(255,255,255); text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px" alt="" /> 本demo背景是一个视频，文字是打印机效果，按钮在文字打完才会显示，点击按钮背景向上收起，同时显示默认首页组件（如是初建vue项目列表，则为helloWorld.vue的组件内容） 公司电脑没有gif动图尽情谅解 文末会附上demo地址，如需看效果，可前往下载 本人一直很喜欢网页开场有一段视频或动画，个人认为网页的开场动画起到引导浏览作用，相当于网页的一个开始，一个好的开始往往就成功了一半，对于浏览网站的用户来说，也就吸引了极大地注意力。 以上都是废话，网页开场动画在移动端的应用十分广泛，具体操作以后工作涉及到会在简书更新。今天我们主要讲述vue做pc端网页开场动画。 vue项目列表里与src同级有一个index.html，我们主要在这里做文章。 1.首先我们要明白vue渲染组件都是基于这个主页index，用vue新建项目，打开网页的时候有一个默认打开的组件，这个不多解释。我们要做的就是把这个组件隐藏，不然他的内容会出现在这个视频的上面。 helloWorld.vue组件里：
index.html里将helloWorld组件里的hello 移除，当然在此之前你要先将它存储到另一个容器里暂存一下，或者克隆也行（克隆代码不演示了，有问题评论或私信都可以）。暂存的作用就是为了后面把这个节点再恢复到页面。
2.直接在index页面引入视频，本demo是直接找了个视频插件放进去，这一步很简单，需要引入的文件都放入静态文件夹static下。 需要注意的是，首页的样式直接影响到组件里标签的样式，所以在引入插件的时候，注意样式的调节，避免直接用标签写样式 3.如果背景已经是视频了，从审美角度，网页上最多添一些字就可以了，样式太多会乱且浮夸。本demo也使用了一个叫typewrite.js的插件。一个一个打出字的效果。
4.给按钮设个定时，算好字打完的时间，按钮显示，点击按钮的同时，index的整个背景容器向上收起（你主页所有的html内容放在一个容器里），并且将hello组件内容恢复。hello随便写点内容。
... demo涉及element等配置问题，直接拿两个页面代码出来也可能实现不了我所展示的效果，感兴趣可以访问我github地址： 总结以上所述是小编给大家介绍的vue做网页开场视频的实例代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
