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

最新推荐文章于 2025-01-20 14:39:57 发布

OnMy22

最新推荐文章于 2025-01-20 14:39:57 发布

阅读量1.7w

点赞数 27

本文链接：https://blog.csdn.net/weixin_38654336/article/details/80517723

版权

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

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

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

这里为了设计简便，用了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&#