渐变响应式 HTML5 个人导航页

> 本文章源码原址 [渐变响应式 HTML5 导航页 - 爆胎博客 (itggg.cn)](https://www.itggg.cn/fx/483.html)，并由nuoxian修改部分代码并发布

## 演示

![][1]

## 功能

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

## 配置

标题，更改为自己的
</div>

``````html

<h1>渐变响应式 HTML5 个人导航页</h1>

<h5>这是一句话介绍...</h5>
``````

页面标题，更改为自己的
</div>

```html

<title>渐变响应式 HTML5 个人导航页</title>
```

ICO图标，更改为自己的
</div>

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

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

```html

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

**渐变背景图片和颜色设置，默认使用必应每日一图，您也可以改成你直接的图片，替换链接即可，颜色可参考：**[中国传统颜色](http://zhongguose.com/)
</div>

```html

     <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
</div>

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

导航修改，修改href里面和文字描述即可
</div>

```html

<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的时间和描述就行
</div>

```html
<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>
	
```

## 下载

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

[1]: https://img.nxvav.cn/2022/01/15/mjJgFIH0spzutucV.png

最后修改：2022 年 01 月 15 日