动态黑窗口打印特效404模板HTML源码

5911

源码介绍

动态黑窗口打印特效404模板HTML源码，可以做为自己网站的404错误页面，页面里好看的黑窗口自动打印文字特效，点击其中的home可以跳转到对应的页面，源码由HTML+CSS+JS组成，记事本修改即可，喜欢的朋友可以拿去使用，将下面的代码放到空白的404.html，然后上传到服务器即可

效果截图

图片[1]-动态黑窗口打印特效404模板HTML源码-QQ沐编程

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dan Gold 404</title>
		<style>body {
  background: #000;
  color: #fff;
  font-family: "Lucida Console", Monaco, monospace;
  line-height: 1.5;
}

a {
  color: #fff;
  text-decoration: none;
  border-bottom: solid 2px;
}

@media (min-width: 640px) {
  body {
    background-image: url(https://images.unsplash.com/photo-1432821596592-e2c18b78144f?dpr=2&fit=crop&fm=jpg&h=960&ixlib=rb-0.3.5&q=50&w=1440);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
  }

  .content {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #333;
    padding: 45px 20px 20px;
    box-sizing: border-box;
    box-shadow: 0 0 25px rgba(0, 0, 0, .5);
    border-radius: 5px 5px 0 0;
  }

  .browser-bar {
    background: #f9f9f3;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
  }

  .button {
    display: inline-block;
    float: left;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }

  .close {
    background: #fc635d;
  }

  .min {
    background: #fdbc40;
  }

  .max {
    background: #34c84a;
  }
}</style>
<!--QQ沐编程 www.qqmu.com 学习QQ群：290987565  域名抢注 https://www.juming.com/t/33210x2a49c4 -->
	</head>
	<body>
		<div class="content">
		  <div class="browser-bar">
		    <span class="close button"></span>
		    <span class="min button"></span>
		    <span class="max button"></span>
		  </div>
		  <div class="text"></div>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script>!function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.isInput=this.el.is("input"),this.attr=this.options.attr,this.showCursor=this.isInput?!1:this.options.showCursor,this.elContent=this.attr?this.el.attr(this.attr):this.el.text(),this.contentType=this.options.contentType,this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.stringsElement=this.options.stringsElement,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.cursorChar=this.options.cursorChar,this.shuffle=this.options.shuffle,this.sequence=[],this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){for(var s=0;s<t.strings.length;++s)t.sequence[s]=s;t.shuffle&&(t.sequence=t.shuffleArray(t.sequence)),t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos)},t.startDelay)},build:function(){var s=this;if(this.showCursor===!0&&(this.cursor=t('<span class="typed-cursor">'+this.cursorChar+"</span>"),this.el.after(this.cursor)),this.stringsElement){s.strings=[],this.stringsElement.hide();var e=this.stringsElement.find("p");t.each(e,function(e,i){s.strings.push(t(i).html())})}this.init()},typewrite:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.typeSpeed,i=this;i.timeout=setTimeout(function(){var e=0,r=t.substr(s);if("^"===r.charAt(0)){var o=1;/^\^\d+/.test(r)&&(r=/\d+/.exec(r)[0],o+=r.length,e=parseInt(r)),t=t.substring(0,s)+t.substring(s+o)}if("html"===i.contentType){var n=t.substr(s).charAt(0);if("<"===n||"&"===n){var a="",h="";for(h="<"===n?">":";";t.substr(s).charAt(0)!==h;)a+=t.substr(s).charAt(0),s++;s++,a+=h}}i.timeout=setTimeout(function(){if(s===t.length){if(i.options.onStringTyped(i.arrayPos),i.arrayPos===i.strings.length-1&&(i.options.callback(),i.curLoop++,i.loop===!1||i.curLoop===i.loopCount))return;i.timeout=setTimeout(function(){i.backspace(t,s)},i.backDelay)}else{0===s&&i.options.preStringTyped(i.arrayPos);var e=t.substr(0,s+1);i.attr?i.el.attr(i.attr,e):i.isInput?i.el.val(e):"html"===i.contentType?i.el.html(e):i.el.text(e),s++,i.typewrite(t,s)}},e)},e)}},backspace:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.backSpeed,i=this;i.timeout=setTimeout(function(){if("html"===i.contentType&&">"===t.substr(s).charAt(0)){for(var e="";"<"!==t.substr(s).charAt(0);)e-=t.substr(s).charAt(0),s--;s--,e+="<"}var r=t.substr(0,s);i.attr?i.el.attr(i.attr,r):i.isInput?i.el.val(r):"html"===i.contentType?i.el.html(r):i.el.text(r),s>i.stopNum?(s--,i.backspace(t,s)):s<=i.stopNum&&(i.arrayPos++,i.arrayPos===i.strings.length?(i.arrayPos=0,i.shuffle&&(i.sequence=i.shuffleArray(i.sequence)),i.init()):i.typewrite(i.strings[i.sequence[i.arrayPos]],s))},e)}},shuffleArray:function(t){var s,e,i=t.length;if(i)for(;--i;)e=Math.floor(Math.random()*(i+1)),s=t[e],t[e]=t[i],t[i]=s;return t},reset:function(){var t=this;clearInterval(t.timeout);var s=this.el.attr("id");this.el.after('<span id="'+s+'"/>'),this.el.remove(),"undefined"!=typeof this.cursor&&this.cursor.remove(),t.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var i=t(this),r=i.data("typed"),o="object"==typeof e&&e;r||i.data("typed",r=new s(this,o)),"string"==typeof e&&r[e]()})},t.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,shuffle:!1,backDelay:500,loop:!1,loopCount:!1,showCursor:!0,cursorChar:"|",attr:null,contentType:"html",callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery);

$(function(){
  $('.text').typed({
    strings: [
      "Oops! It looks like you're lost. <br /> ^1000" + 
      "Sorry about that. <br /> ^1000" +
      "Let me try and help. <br /> ^1000" +
      "Go back <a href='https://www.qqmu.com'>home</a> and start over."
    ],
    typeSpeed: 0,
    showCursor: false
  });
});</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c8375f1ac141d4b69a5edf133f2cbaab";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

	</body>
</html>

更多好看的404页面html源码可以搜索QQ沐编程，觉得有帮助的话可以CTRL+D收藏一下本站

© 版权声明
本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！
THE END
404模板
# 404# CSS
喜欢就支持一下吧
点赞11赞赏 分享
沐编程的头像-QQ沐编程
161套javaWeb项目源码免费分享-QQ沐编程
161套javaWeb项目源码免费分享
161套javaWeb项目源码免费分享
1年前 4172
计算机专业相关的毕业设计论文合集免费下载-QQ沐编程
计算机专业相关的毕业设计论文合集免费下载
计算机专业相关的毕业设计论文合集免费下载
7个月前 4022
javaweb+C+asp毕业设计项目合集免费下载-QQ沐编程
javaweb+C+asp毕业设计项目合集免费下载
javaweb+C+asp毕业设计项目合集免费下载
7个月前 3055
javaWeb毕业设计项目完整源码附带论文合集免费下载-QQ沐编程
javaWeb毕业设计项目完整源码附带论文合集免费下载
javaWeb毕业设计项目完整源码附带论文合集免费下载
2年前 2513
Live2d资源模型包合集免费下载-QQ沐编程
Live2d资源模型包合集免费下载
Live2d资源模型包合集免费下载
9个月前 1838
本站第一篇：QQ沐编程启航-QQ沐编程
本站第一篇：QQ沐编程启航
本站第一篇：QQ沐编程启航
2年前 1329
相关推荐
二次元风格网站维护页HTML源码-QQ沐编程
二次元风格网站维护页HTML源码
二次元风格网站维护页HTML源码
3个月前 204
简约黄色闪电404模板HTML源码-QQ沐编程
简约黄色闪电404模板HTML源码
简约黄色闪电404模板HTML源码
4个月前 168
超级好看的网站维护页面HTML源码-QQ沐编程
超级好看的网站维护页面HTML源码
超级好看的网站维护页面HTML源码
5个月前 159
美观的404错误页面模板免费下载-QQ沐编程
美观的404错误页面模板免费下载
美观的404错误页面模板免费下载
8个月前 135
二次元人物背景和泉纱雾404网站错误页面源码-QQ沐编程
二次元人物背景和泉纱雾404网站错误页面源码
二次元人物背景和泉纱雾404网站错误页面源码
8个月前 107
非常好看404错误页面简约清新HTML源码-QQ沐编程
非常好看404错误页面简约清新HTML源码
非常好看404错误页面简约清新HTML源码
2个月前 106
用户封面
沐编程的头像-QQ沐编程
div+css3制作的简洁404错误页面HTML源码
CSS制作月球行走404页面HTML源码
批处理判断是否为管理员权限如果不是则自动获取管理权限
搜索
开启精彩搜索
热门文章
161套javaWeb项目源码免费分享-QQ沐编程

161套javaWeb项目源码免费分享

java项目项目专区# java# 课程设计# 毕业设计
沐编程的头像-QQ沐编程1年前
417217
计算机专业相关的毕业设计论文合集免费下载-QQ沐编程

计算机专业相关的毕业设计论文合集免费下载

随心随笔# php# javaweb
沐编程的头像-QQ沐编程7个月前
4022300
javaweb+C+asp毕业设计项目合集免费下载-QQ沐编程

javaweb+C+asp毕业设计项目合集免费下载

java项目# C语言# javaweb
沐编程的头像-QQ沐编程7个月前
3055452
javaWeb毕业设计项目完整源码附带论文合集免费下载-QQ沐编程

javaWeb毕业设计项目完整源码附带论文合集免费下载

java项目项目专区# 毕业设计# javaweb
沐编程的头像-QQ沐编程2年前
2513215
Live2d资源模型包合集免费下载-QQ沐编程

Live2d资源模型包合集免费下载

随心随笔# live2d
沐编程的头像-QQ沐编程9个月前
183867
本站第一篇：QQ沐编程启航-QQ沐编程

本站第一篇：QQ沐编程启航

随心随笔
沐编程的头像-QQ沐编程2年前
132996
标签云
黑名单系统麻雀搜索算法高清壁纸饿了么领取红包面试防骗宣传链表配置镜像选课系统迷宫求解远程链接服务器远程仓库软考中级软件库源码软件下载页源码跳转源码赏帮赚负载均衡课程设计