现学现卖做一个炫酷的动态背景页面

很喜欢酷炫的页面，自从看了抖音的主页之后（如下）（链接），就决定要也做一个牛逼的动态背景页面

对。。。背景是视频，而且还有音效，太牛逼了

然后决定自己做一个，废话不说，先弄代码：

这里为了设计简便，用了bootstrap和jquery（其实对这两个框架都不熟，现学现卖呗）（记得要引入bootstrap和jquery），代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../css/index-css.css"><link rel="stylesheet" href="../css/bootstrap.min.css"><link rel="stylesheet" href="../css/footer.css"><script src="../js/jquery-3.3.1.min.js"></script><script src="../js/bootstrap.min.js"></script><script src="../js/index-js.js"></script></head>
<body><nav class="navbar navbar-inverse clearFloat my-navbar" role="navigation"><div class="container-fluid" id="navbar"><div class="navbar-header"><a class="navbar-brand" href="#" style="color: whitesmoke">Acoustic</a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav" id="mytab"><li class="" id=""><a href="" style="color: whitesmoke">开始旅程</a></li><li class="" id=""><a href="" style="color: whitesmoke">关于live</a></li><li class="" id="AboutUs"><a style="color: whitesmoke">关于我们</a></li></ul><!--<form class="navbar-form navbar-left" role="search">--><!--<div class="form-group">--><!--<input type="text" class="form-control" placeholder="搜索">--><!--</div>--><!--<button type="submit" class="btn btn-default">搜索</button>--><!--</form>--><ul class="nav navbar-nav navbar-right"><li><a href="" style="color: whitesmoke">登录</a></li><li><a href="" style="color: whitesmoke">注册</a> </li><!--<li class="dropdown">--><!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">点我<span class="caret"></span></a>--><!--<ul class="dropdown-menu" role="menu">--><!--<li><a href="#">hello1</a> </li>--><!--<li><a href="#">hello1</a> </li>--><!--<li><a href="#">hello1</a> </li>--><!--</ul>--><!--</li>--></ul></div></div></nav><video src="../video/0001.哔哩哔哩-ONE%20OK%20ROCK%20-%20Taking%20Off%20%5BStudio%20Jam%20Session%5D%5B超清版%5D~1.mp4" type="video/mp4" autoplay="autoplay" loop="loop" class="video-bg"></video><div class="container my-content" ><h1 style="background-color: rgba(255,255,255,0);color: whitesmoke;padding-bottom: 25px";>找寻属于你的LIVE</h1><p>你是否厌倦了电音和CD，讨厌来自机器的音乐</p><p>让我们带你走进live的，感受不插电，感受音乐的本质！</p><p style="text-align: center;color: whitesmoke">专注于挖掘你喜欢的unplugged现场</p><div style="padding: 15px 50px 10px;"><form class="bs-example bs-example-form" role="form"><div class="input-group input-group-lg col-lg-6" style="left: 25%"><input type="text" class="form-control" placeholder="搜索你的live！"><div class="input-group-btn"><button type="button" class="btn my-btn">GO</button></div></div></div><!--<p style="color: white">我们喜欢不插电，我们专注于挖掘你喜欢的unplugged现场<br/>我们的所有现场都是高清</p>--><!--<h2 style="background-color: rgba(255,255,255,0);color: white">我们喜欢 Ed shreen的现场，喜欢oneokrock的现场.....</h2>--><!--<p style="color: white">我们的视频来自于YouTube<br/>来自于youku<br/>来自于音悦台<br/>......</p>--></div><div class="container" id="div-AboutUs"><p>我们来自桂平.....</p></div><footer class="footer navbar-fixed-bottom"><div class="container"><footer class="footer"><nav class="nav-warpper" style="text-align: center"><span>|</span> <a href="/gamemessage/">关于我们</a><span>|</span><a href="/aboutus/">联系我们</a><span>|</span></nav><div class="feedback-info"><p><span id="copyYear">2018</span> &copy; Acoustic www.Acoustic.com | 桂ICP备16016397号-3 | 广西Acoustic有限公司 |  地址 : 广西桂平市幸福家园小区10栋2单元 </p><p><a target="_blank" href="http://www.12377.cn/" style="color: white">中国互联网举报中心</a> | 网络文化许可证-京网文-（2016）2282-264号 | 违法和不良信息举报：010-83434212</p></div></footer></div></footer>
</body>
</html>

来解释一下，首先做一个有声音，动态的背景，其实就是引入一个video文件，autoplay用来设置打开网页就自动播放，loop指定视频无线循环~，其中最终要是要把视频的样式设置为背景，用css来设置video标签内的样式：

CSS文件：

    video{position: fixed;right: 0;bottom: 0;min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: -9999;}/*.video-bg{*//*width: 100%;*//*height: 100%;*//*padding-bottom: 0;*//*float: left;*//*}*/h1{background-color:rgba(0,0,0,0.1);}.input-1{position: relative;}.my-navbar{background-color: transparent;}.my-content h1{padding-top: 5%;}.my-content h1,h2,p{text-align: center;}.my-btn{background-color: antiquewhite;color: black;}

这里将video设置为背景，用到z-index属性，z-index就是设置堆叠顺序，将z-index属性设置为-9999也就是将视频放置在堆叠的最下层，z-index的相关资料链接：菜鸟教程

接下来，看效果啦！

对的，再上一张图证明这个网页背景是会动的：

对，很酷炫，大大的满足了我的虚荣心

接下来，我们用jquery做一个小小的试验，这里用jquery做了一个导航栏按钮的效果，鼠标移到按钮处就会出现变化，如下图：

有别于其他链接，第一个链接变黑了，很酷

js的代码如下：

    $(document).ready(function () {$("#navbar ul li").mouseenter(function () {$(this).addClass("active");});$("#navbar ul li").mouseleave(function () {$(this).removeClass("active");});});$(document).ready(function(){$("#AboutUs").click(function(){$("#div-AboutUs").fadeToggle();});});

这个酷炫的网页就完成了！有很多不足，但是满足了我的创作欲，好了，接下来又该回到我漫长的H5基础的学习之旅....

现学现卖做一个炫酷的动态背景页面相关推荐

一个炫酷的动态背景页面
喜欢酷炫的页面,自从看了抖音的主页之后(如下)(链接),就决定要也做一个牛逼的动态背景页面对...背景是视频,而且还有音效,太牛逼了然后决定自己做一个,废话不说,先弄代码: 这里为了设计简便,用了 ...
python实现动态壁纸_流弊了！竟然用Python做一个炫酷的小姐姐动态壁纸
原标题:流弊了!竟然用Python做一个炫酷的小姐姐动态壁纸公众号关注 " 菜鸟学Python" 设为 "星标",每天带你玩转Python! (女神IU,图片 ...
如何做一个炫酷的动画网站-css实现图片上下浮动效果
目前网站制作技术已经非常成熟.所以要实现一个炫酷的动画网站还是非常容易,现在通过js和css就都能实现.直接css就能实现各种效果,下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动 ...
流弊了！竟然用Python做一个炫酷的小姐姐动态壁纸！
(女神IU,图片来自网络) 最近小编在浏览网页的时候,发现一个网页的背景是动态显示的,非常的炫酷.正好小编最近犯花痴,心仪的女神是韩国的小美女IU, 清纯可爱的小姐姐--关键中文歌还唱的很好. 于是码 ...
像360悬浮窗那样，用WindowManager做一个炫酷的悬浮迷你音乐盒（下）
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布在上一篇文章像360悬浮窗那样,用WindowManager实现炫酷的悬浮迷你音乐盒(上)中我粗粗的向大家介绍了WindowMan ...
像360悬浮窗那样，用WindowManager做一个炫酷的悬浮迷你音乐盒（上）
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布记得上一篇讲的是用RotateDrawable实现网易云音乐唱片机效果,而今天我要讲的是如何用WindowManager去实现一个 ...
五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
完整源码详见微信公众号:创享日记对话框发送:登录页面获取HTML+CSS+js等源码文件一.彩虹气泡登录页面效果图: HTML源码: <!DOCTYPE html> <ht ...
python 天气预报地图_在树莓派上用 python 做一个炫酷的天气预报
#encoding: utf-8 importpygameimporttimeimportweatherAPIimportSystemInfofrom datetime importdatetime# ...
现学现卖微信小程序开发（二）
现学现卖微信小程序开发(一) 现学现卖微信小程序开发(三):引入Rx,为小程序插上翅膀一个Todo应用的小程序版好的,那么下一步我们就先照猫画虎,新建一个todos文件夹,然后一套四样同名文件准备 ...

现学现卖做一个炫酷的动态背景页面

现学现卖做一个炫酷的动态背景页面相关推荐

最新文章

热门文章