一个炫酷的动态背景页面
喜欢酷炫的页面，自从看了抖音的主页之后（如下）（链接），就决定要也做一个牛逼的动态背景页面
对。。。背景是视频，而且还有音效，太牛逼了
然后决定自己做一个，废话不说，先弄代码：
这里为了设计简便，用了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> © 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>
一个炫酷的动态背景页面相关推荐
- 现学现卖做一个炫酷的动态背景页面
很喜欢酷炫的页面,自从看了抖音的主页之后(如下)(链接),就决定要也做一个牛逼的动态背景页面 对...背景是视频,而且还有音效,太牛逼了 然后决定自己做一个,废话不说,先弄代码: 这里为了设计简便,用 ...
- 五款炫酷精美动态登录页面，彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
完整源码详见 微信公众号:创享日记 对话框发送:登录页面 获取HTML+CSS+js等源码文件 一.彩虹气泡登录页面 效果图: HTML源码: <!DOCTYPE html> <ht ...
- 给页面写一个炫酷的时钟特效【web前端】
文章目录 一.前言 二.想法设计/实现过程 三.基本样式 四.时间函数控制器 五,时,分,秒占位 六.时间动态填充 一.前言 今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页 ...
- python实现动态壁纸_流弊了！竟然用Python做一个炫酷的小姐姐动态壁纸
原标题:流弊了!竟然用Python做一个炫酷的小姐姐动态壁纸 公众号关注 " 菜鸟学Python" 设为 "星标",每天带你玩转Python! (女神IU,图片 ...
- java比较炫的登录界面_教你写一个炫酷的Material Design 风格的登录和注册页面
每个人都会喜欢漂亮的登录界面,一个App 给人们的第一印象是非常重要的. 这篇文章将教你使用谷歌材料设计规范(Material design spec )和谷歌的新的设计支持库( design sup ...
- 一个炫酷的二维码生成项目附源码
前阵子打算换一个炫酷的公众号二维码,无奈市面上很多的二维码修改器都不尽人意. 草料二维码也挺炫酷的,但是也没有满意的效果. 于是又去万能的github逛了一下,终于找到了一款开源的二维码修改器. 这个 ...
- 一个炫酷的flash网站模板
这是一个炫酷的flash欧美网站模板,它包括首页,公司简介,留言等五个页面,界面转换非常的炫酷!他还有时间.全屏.背景音乐开关的功能!有兴趣的朋友可以看看!贴几张网站图片给大家看看! 下载后直接找到s ...
- 元旦到了，手把手教你用 Python 制作一个炫酷烟花秀
大家好,我是小张, 今天是2021 的最后一天,到了这个时间点,部分小伙伴已经开始复盘这一年的得与失.比如今年增加了多少技能点,看了多少本书,写了多少篇文章或者年前的小目标实现进度大概多少等等:做一个 ...
- 【Python】精选30张炫酷的动态交互式图表，Pandas一键生成，通俗易懂
今天小编来讲一下如何用一行代码在DataFrame数据集当中生成炫酷的动态交互式的图表,我们先来介绍一下这次需要用到的模块cufflinks 就像是seaborn封装了matplotlib一样,cuf ...
最新文章
- Apriori算法通俗详解_fpgrowth2_关联分析评估
- Spring多数据源配置和使用
- 使用WINAPI获得磁盘空间信息
- 何时开始phonics学习及配套阅读训练zz
- 专家解读EdgeRoutine边缘程序
- Serverless——前端的3.0时代
- js实现阶乘算法的三种方法
- REUSE_ALV_GRID_DISPLAY显示ALV，设置可编辑时，与内表数据同步问题
- 盗版，盗版给了我们什么？
- java 25 - 2 网络编程之 网络通信三要素
- 计算机一级四五章重点,《信息技术》第四章要点
- 物理专业英语词汇(O-Z)
- 安装Mediapipe中遇到的问题ERROR: An error occurred during the fetch of repository ‘local_execution_config_pyt
- MySQL服务器地址为空,win10 mysql没有服务器地址
- IOS 5 拦截手机短信(需越狱)
- 函数的递归调用（C++）
- windows 无法在此计算机上完成安装,重装系统后显示无法完成安装|Windows无法在此计算机安装...
- 网络空间安全进入动态防御时代
- isset php 二维数组_php 一维数组按条件转换成二维数组
- java里emp是什么_EMP微前端分享内容回顾（中）