|
可以把所有链接做个导航页呢 统一显示
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script type="text/javascript" src="https://www.liuzehe.top/upload/bkjs/yinghua.js"></script>
- <canvas style="position: fixed;left: 0;top: 0;pointer-events: none;" id="canvas_sakura" width="1536" height="708"></canvas>
- <title>导航页</title>
- <style>
- body {
- background: url('https://5b0988e595225.cdn.sohucs.com/images/20171013/a07851ff322048f2b75f9d59f2e9a304.jpeg') no-repeat center center fixed; /* 自定义背景图片 */
- background-size: cover;
- margin: 0;
- font-family: Arial, sans-serif;
- color: white;
- text-align: center;
- }
- .container {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- height: 100vh;
- }
- .icon {
- margin: 20px;
- text-align: center;
- }
- .icon a {
- text-decoration: none;
- color: white; /* 字体颜色 */
- }
- .icon img {
- width: 100px;
- height: 100px;
- border-radius: 15px;
- transition: transform 0.2s;
- }
- .icon img:hover {
- transform: scale(1.1);
- }
- .icon p {
- margin-top: 10px;
- font-size: 14px;
- color: white; /* 字体颜色 */
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="icon">
- <a href="http://你的博客链接">
- <img src="https://img0.baidu.com/it/u=634793906,3022152897&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="博客">
- <p>博客</p>
- </a>
- </div>
- <div class="icon">
- <a href="http://l你的路由器主页">
- <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1604050391.57294650.jpg" alt="CR660主页">
- <p>CR660主页</p>
- </a>
- </div>
- <div class="icon">
- <a href="http://你的应用地址">
- <img src="https://lucky666.cn/img/logo.svg" alt="Lucky 后台管理">
- <p>Lucky 后台管理</p>
- </a>
- </div>
- <div class="icon">
- <a href="https://你的应用地址">
- <img src="https://www.szicp.com/images/upload/image/20180921/20180921092336_36619.jpg" alt="webd文件分享">
- <p>webd文件分享</p>
- </a>
- </div>
-
- </div>
- <canvas style="position: fixed;left: 0;top: 0;pointer-events: none;" id="canvas_sakura" width="1536" height="708"></canvas>
- </body>
- <script>
- (function () {
- var a_idx = 0;
- window.onclick = function (event) {
- var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国",
- "敬业", "诚信", "友善");
-
- var heart = document.createElement("b"); //创建b元素
- heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
-
- document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
- a_idx = (a_idx + 1) % a.length;
- heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
-
- var f = 2, // 字体大小
- x = event.clientX - f / 2, // 横坐标
- y = event.clientY - f, // 纵坐标
- c = randomColor(), // 随机颜色
- a = 1, // 透明度
- s = 0.6; // 放大缩小
-
- var timer = setInterval(function () { //添加定时器
- if (a <= 0) {
- document.body.removeChild(heart);
- clearInterval(timer);
- } else {
- heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
- c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
- s + ");";
-
- y--;
- a -= 0.016;
- s += 0.002;
- }
- }, 15)
-
- }
- // 随机颜色
- function randomColor() {
-
- return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
- .random() * 255)) + ")";
-
- }
- }());
- </script>
- </html>
复制代码
http://1hc.us.kg/我的导航页面
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
×
评分
-
查看全部评分
|