【网站源码】【分享】HTML动画个人导航页面
本帖最后由 By丿安之若素 于 2020-3-12 21:13 编辑原作者：孟坤
一个 个人 用的导航页面，显示效果挺好的
下面放图，放部分源码
附件里是完整的，如果需要使用的话请保留原作者的版权信息，
如需使用请自行修改index.html里的部分资源路径（刚刚压缩包里少了一个css，重新上传了，感谢刚刚那个细心的兄弟）
```
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Web 导航 Web 实验室</title>
<meta name="keywords" content="网页实验室,Web 实验室,博客">
<!--修改这里的路径-->
<!-- font-awesome 图标字体 -->
<linkmedia="screen" rel="stylesheet" type="text/css">
<!--修改这里的路径-->
<!-- 实验室核心样式文件 -->
<link rel="stylesheet" >
</head>
<body>
<header class="header">
<!-- 动画展示区域 -->
<div id="victor-container"><div id="victor-output"></div></div>
<div class="welcome">
<p>— 欢迎访问 —</p>
<!--修改这里的路径 LOGO-->
<img class="web-title" src="http://hc.********/bg.png" alt="Web 实验室" draggable="false"
onerror="onerror=null;src='http://hc.********/bg.png'">
</div>
<!--向下滚动提示-->
<a class="scroll-down-tips" href="#product">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
向下滚动
</a>
</header> <!-- header -->
<div class="container">
<section class="section">
<a name="product"></a>
<h3 class="mk-sub-title">
<span>Product</span>
<span>/</span>
原创作品
</h3>
<p class="mk-title-describe">没错，这些都是我的原创作品</p>
<!--修改这里自己添加自己的网站链接-->
<div class="mk-item-box">
<div class="mk-item">
<a href="/music/" target="_blank">
<article class="mk-color-item color2">
<div class="item-logo">
<i class="fa fa-music" aria-hidden="true"></i>
</div>
<h3>歌曲搜索</h3>
<p>基于第三方API 的音乐搜索引擎</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<atarget="_blank">
<article class="mk-color-item color1">
<div class="item-logo">
<i class="fa fa-film" aria-hidden="true"></i>
</div>
<h3>免费影视</h3>
<p>基于第三方API 的影视网站</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="/qrcode/" target="_blank">
<article class="mk-color-item color3">
<div class="item-logo">
<i class="fa fa-battery-three-quarters" aria-hidden="true"></i>
</div>
<h3>给我充充电吧！！</h3>
<p>午饭能不能吃好，全靠它啦！</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
</div><!-- mk-item-box -->
</section><!--class="section" -->
<section class="section"><!--class="section" -->
<div class="mk-big-title">
<h4>About</h4>
</div>
<div class="about-content">
<p>Web 实验室用来陈列一些新鲜、好玩的 Html 作品。这些作品中，有一些是本人原创或改写的，
还有一些是别人的开源大作，但因其很有特色，值得学习玩味，因此也出现在这里。</p>
<p>本人崇尚开源精神，因此“实验室”中大部分作品是开源的。
即使没有开源，您也可以通过右键>查看源代码以进行查阅。
请注意，开源不代表可以滥用，转载或使用这些源代码时，请务必保留原始的版权信息！
这是一个程序员最基本的修养，也是对原作者最起码的尊重。</p>
<p>欲了解更多内容，请访问我的 <atarget="_blank">个人博客</a>。</p>
</div>
</section>
</div> <!-- class=container -->
<footer class="footer">
<p>Copyright (c) 2019. Design by
<a href="#http://my.********" rel="nofollow">Web 导航</a>.</p>
<p>ICP证：<atarget="_blank">ICP备********号</a></p>
</footer>
<!-- 返回顶部 -->
<div class="mk-uptop" title="点击返回顶部"></div>
<!-- jq -->
<!--修改这里的路径-->
<script src="http://hc.********/jquery.min.js"></script>
<script src="http://hc.********/vector.js"></script>
<script>
$(function(){
// 页面加载完毕后固定页头高度，防止在某些自动隐藏工具栏的移动浏览器上出现页面抖动现象
$(".header").height($(window).height());
// 初始化 传入dom id
var victor = new Victor("victor-container", "victor-output");
var theme = [
["#002c4a", "#005584"],
["#35ac03", "#3f4303"],
["#ac0908", "#cd5726"],
["#18bbff", "#00486b"]
];
var color = theme;
victor(color).set();
// 监听滚动变化
$(window).scroll(function() {
if($(window).scrollTop() < 300) {
$(".mk-uptop").removeClass("show");
} else {
$(".mk-uptop").addClass("show");
}
});
// 返回顶部
$(".mk-uptop").click(function(){
$("html, body").animate({scrollTop:0}, "normal");
return false;
});
// 烦人的 CNZZ，输出一大堆错误信息、、清除掉！
console.clear();
});
/*******************************
* 函数名：生成指定范围的随机数
* 输入：(under)下限 (over)上限
* 输出： 所需要的数值
* *****************************/
function fRandomBy(under, over) {
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
}
}
</script>
<style></body></style>
</body>
</html>
```
免费的评分走一波好不好
附件里是不是少给个css文件啊 By丿安之若素 发表于 2020-3-23 21:09
你文件放到路径和你写的路径不相符，你看看你index.css的路径写法就是错误，字体那个css估计也是路径错了
index.css路径是对的 就是在根目录下的，而那个字体图标的css同样在根目录却不会识别 不错 下来研究一下 挺好的，这个效果好看 虽然看不懂，但还是谢谢分享 下来研究一下，看着不错
感谢楼主分享源码 不错666
cliencer 发表于 2020-3-12 20:57
附件里是不是少给个css文件啊
不好意思 我重新编辑一下 谁能教教我怎么建站吗,