第2页 - 渐变响应式 HTML5 个人导航页

渐变响应式 HTML5 个人导航页

nuoxian

2021 年 05 月 15 日

9815 次浏览

21 条评论

2312字数

默认分类原创分类

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

## 演示

![][1]

## 功能

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

## 配置

[scode type="blue"]标题，更改为自己的[/scode]

``````html

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

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

[scode type="blue"]页面标题，更改为自己的[/scode]

```html

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

[scode type="blue"]ICO图标，更改为自己的[/scode]

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

[scode type="blue"]仙言一句话，默认选项，不需要删除这2行就行[/scode]

```html

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

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

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

[scode type="blue"]背景音乐，id后更改为网易云音乐id[/scode]

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

[scode type="blue"]导航修改，修改href里面和文字描述即可[/scode]

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

[scode type="blue"]网站计时器，修改new Date的时间和描述就行[/scode]

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

## 下载

[hide] 蓝奏网盘：https://wwi.lanzoui.com/iy8gNp5mbra [/hide]

[1]: https://s21.ax1x.com/2024/10/03/pA3ogde.png

本文章源码原址渐变响应式 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>
	<!-- 加载运行时间结束 -->

下载

此处内容需要评论回复后（审核通过）方可阅读。

> 本文章源码原址 [渐变响应式 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>

背景音乐，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>

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

## 下载

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

[1]: https://s21.ax1x.com/2024/10/03/pA3ogde.png

最后修改：2024 年 10 月 03 日