源创宝库吧 新一代精品资源网 在线工具箱 ⚡3BBS论坛 - 发现更多有趣的⚡ SanS三石导航页 DJ音乐吧-优质的DJ音乐分享平台 任推邦 - 不扣量的项目拉新平台 此位置招租 此位置招租 ⚡3BBS论坛 - 发现更多有趣的⚡ 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 ⚡3BBS论坛 - 发现更多有趣的⚡ 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 ⚡3BBS论坛 - 发现更多有趣的⚡ 此位置招租 此位置招租 此位置招租
返回列表 发布新帖
查看: 80|回复: 1

[模块插件] 动态代码打印特效404页面模板HTML源码

  离线 
灌水成绩
133
209
888
主题
回帖
积分

等级头衔
UID : 83
等级 : 中级会员

积分成就
威望 : 99 点
贡献 : 442 点
蛋壳 : 107 枚
在线时间 : 2299 小时
注册时间 : 2024-4-17
最后登录 : 2024-11-12

荣誉勋章
发表于 2024-8-4 11:19:02 | 查看全部 |阅读模式 来自: 中国–黑龙江–七台河

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
源码介绍
动态代码打印特效404页面模板HTML源码,黑色背景,上面http 404表达这个页面的作用,下面彩色打印js代码,其主要内容也是存托这个404页面,很适合用来做网站错误页,源码是HTML+CSS+JS,记事本里面进行编辑修改,然后将下面代码拷贝到一个空白的404.html里面即可,鼠标双击html文件可以本地查看效果,也可以上传到服务器里面,将错误页面重定向到这个页面即可.
效果预览
完整源码
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Code-Theme 404 Page</title>
  6.     <style>@import url("https://fonts.googleapis.com/css?family=Bevan");
  7. * {
  8.   padding: 0;
  9.   margin: 0;
  10.   box-sizing: border-box;
  11. }
  12. body {
  13.   background: #282828;
  14.   overflow: hidden;
  15. }
  16. p {
  17.   font-family: "Bevan", cursive;
  18.   font-size: 130px;
  19.   margin: 10vh 0 0;
  20.   text-align: center;
  21.   letter-spacing: 5px;
  22.   background-color: black;
  23.   color: transparent;
  24.   text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
  25.   -webkit-background-clip: text;
  26.   -moz-background-clip: text;
  27.   background-clip: text;
  28. }
  29. p span {
  30.   font-size: 1.2em;
  31. }
  32. code {
  33.   color: #bdbdbd;
  34.   text-align: center;
  35.   display: block;
  36.   font-size: 16px;
  37.   margin: 0 30px 25px;
  38. }
  39. code span {
  40.   color: #f0c674;
  41. }
  42. code i {
  43.   color: #b5bd68;
  44. }
  45. code em {
  46.   color: #b294bb;
  47.   font-style: unset;
  48. }
  49. code b {
  50.   color: #81a2be;
  51.   font-weight: 500;
  52. }
  53. a {
  54.   color: #8abeb7;
  55.   font-family: monospace;
  56.   font-size: 20px;
  57.   text-decoration: underline;
  58.   margin-top: 10px;
  59.   display: inline-block;
  60. }
  61. @media screen and (max-width: 880px) {
  62.   p {
  63.     font-size: 14vw;
  64.   }
  65. }</style>
  66.   </head>

  67.   <body>
  68.     <p>HTTP: <span>404</span></p>
  69.     <code><span>this_page</span>.<em>not_found</em> = true;</code>
  70.     <code><span>if</span> (<b>you_spelt_it_wrong</b>) {<span>try_again()</span>;}</code>
  71.     <code><span>else if (<b>we_screwed_up</b>)</span> {<em>alert</em>(<i>"We're really sorry about that."</i>); <span>window</span>.<em>location</em> = home;}</code>
  72.     <center><a href="http://www.qqmu.com/">HOME</a></center>
  73.     <script>function type(n, t) {
  74.     var str = document.getElementsByTagName("code")[n].innerHTML.toString();
  75.     var i = 0;
  76.     document.getElementsByTagName("code")[n].innerHTML = "";
  77.     setTimeout(function() {
  78.         var se = setInterval(function() {
  79.             i++;
  80.             document.getElementsByTagName("code")[n].innerHTML =
  81.                 str.slice(0, i) + "|";
  82.             if (i == str.length) {
  83.                 clearInterval(se);
  84.                 document.getElementsByTagName("code")[n].innerHTML = str;
  85.             }
  86.         }, 10);
  87.     }, t);
  88. }
  89. type(0, 0);
  90. type(1, 600);
  91. type(2, 1300);
  92. </script>
  93.   </body>
  94. </html>
复制代码
生无可恋
  在线 
灌水成绩
2193
16732
22832
主题
回帖
积分

等级头衔
UID : 79
等级 : 超级版主

积分成就
威望 : 1012 点
贡献 : 2450 点
蛋壳 : 22649 枚
在线时间 : 3395 小时
注册时间 : 2024-4-13
最后登录 : 2024-11-21

荣誉勋章

荣誉会员帅哥认证最佳新人活跃会员灌水之王实习版主推广达人宣传达人论坛元老热心会员优秀作者优秀版主超级版主部落真神挂机之王

发表于 2024-8-4 23:21:59 | 查看全部 来自: 中国–上海–上海–浦东新区
💪 坚持下去,你会发现自己比想象中更强大。 💪
—— 来自:荷包蛋部落(HBD0.CN)已读乱回
新帖通知群(钉钉群):点击查看
荷包蛋部落(QQ群):荷包蛋部落 - HBD0.CN
💥荷包蛋联盟-免费的自助广告-为广大用户提供宣传服务!💯
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1楼
2楼
投诉/建议联系

8641340@qq.com

欢迎各位朋友加入本社区,
共同维护良好的社区氛围
  • QQ用户交流群
  • 钉钉新帖推送群
Powered by Discuz! X3.5 Licensed  Copyright © 2001-2024 荷包蛋部落 版权所有 All Rights Reserved. 鲁ICP备20023396号-6
关灯 在本版发帖
加入钉钉新帖推送群
QQ客服返回顶部
快速回复 返回顶部 返回列表