侧边栏壁纸
    love love love

  • 累计撰写 20 篇文章
  • 累计收到 6 条评论

渐变响应式 HTML5 个人导航页

秋枫
2021-06-07 / 2 评论 / 114 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年06月07日,已超过112天没有更新,若内容或图片失效,请留言反馈。

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

演示

演示

功能

  1. 响应式设计,设备自适应
  2. 获取访客位置信息
  3. 调用一言
  4. 网站计时器
  5. 网站背景音乐

配置

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

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

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

<!-- 获取仙言 -->
<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>

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

<!-- 导航按钮 -->
<h5>
    <a href="#">链接1</a>
    |
    <a href="#">链接2</a>
    |
    <a href="https://qiufeng.cool">秋枫の博客</a>
</h5>

<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>
    <!-- 加载运行时间结束 -->

源码下载

本文共 350 个字数,平均阅读时长 ≈ 1分钟
2

评论 (2)

取消
  1. 头像
    但是士大夫撒旦
    Windows 10 · Google Chrome

    11111

    回复
  2. 头像
    大尺寸
    Android · Google Chrome

    111

    回复