渐变响应式 HTML5 个人导航页

nuoxian

2021 年 05 月 15 日

6506 次浏览

20 条评论

2312字数

默认分类原创分类

本文章源码原址渐变响应式 HTML5 导航页 - 爆胎博客 (itggg.cn)，并由nuoxian修改部分代码并发布

演示

功能

响应式设计，设备自适应
获取访客位置信息
调用仙言
网站计时器
网站背景音乐

配置

标题，更改为自己的

<!-- 大标题名称 -->
<h1>渐变响应式 HTML5 个人导航页</h1>
<!-- 小标题一句话介绍 -->
<h5>这是一句话介绍...</h5>

页面标题，更改为自己的

<!-- SEO名称/页面名称 -->
<title>渐变响应式 HTML5 个人导航页</title>

ICO图标，更改为自己的

<link rel="icon" type="image/ico" href="./favicon.ico">

仙言一句话，默认选项，不需要删除这2行就行

<!-- 获取仙言 -->
<script type="text/javascript" src="https://api.nxvav.cn/api/xianyan/?encode=js&charset=utf-8"></script>
<script>xianyan()</script>

渐变背景图片和颜色设置，默认使用必应每日一图，您也可以改成你直接的图片，替换链接即可，颜色可参考：中国传统颜色

<!-- 渐变背景初始化 -->
     <script>
     var granimInstance = new Granim({
             element: '#canvas-image-blending',
             direction: 'top-bottom',
             isPausedWhenNotInView: true,
             image : {
                 source: 'https://api.nxvav.cn/api/bing', //每日必应图片调用地址
                 blendingMode: 'multiply'
             },
             states : {
                 "default-state": {
                    gradients: [
                        ['#29323c', '#485563'],
                        ['#FF6B6B', '#556270'],
                        ['#80d3fe', '#7ea0c4'],
                        ['#f0ab51', '#eceba3']
                    ],
                    transitionSpeed: 7000
                  }
             }
     });
     </script>

背景音乐，id后更改为网易云音乐id

<audio class="audio-player" autoplay loop>
        <source src="https://api.nxvav.cn/api/163/?id=451991040" type="audio/mpeg">
</audio>

导航修改，修改href里面和文字描述即可

<!-- 导航按钮 -->
<h5>
    <a href="#">链接1</a>
    |
    <a href="#">链接2</a>
    |
    <a href="<a href="https://nxvav.cn">诺仙の客栈" title="https://nxvav.cn">诺仙の客栈">https://nxvav.cn">诺仙の客栈</a></a>
</h5>

网站计时器，修改new Date的时间和描述就行

<p><span id="runtime_span">正在回忆我们相遇的时间...</span></p>
    <!-- 开始加载运行时间 -->
    <script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("2021/3/27 00:00:00"); //这里修改为你想设置的时间
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "我们已经相遇" + A + "天" + B + "小时" + C + "分" + "了，永远都爱你！" /* + D + "秒" */;
    }
    show_runtime();
    </script>
    <!-- 加载运行时间结束 -->