1
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="none">
<title>404 Not Found</title>
<style>
*{font-family:"Microsoft Yahei";margin:0;font-weight:lighter;text-decoration:none;text-align:center;line-height:2.2em;}
html,body{height:100%;}
h1{font-size:100px;line-height:1em;}
table{width:100%;height:100%;border:0;}
a{color: green; }
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<h1>404</h1>
<h3>大事不妙啦！</h3>
<p>你访问的页面好像不小心被弄丢了~<br>
<a href="#">返回主页</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>效果
2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>404</title>
<script type="text/javascript">window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x6f\x6e\x6b\x65\x79\x64\x6f\x77\x6e"]=function(){ var fumPYaALN1 = window["\x65\x76\x65\x6e\x74"]||arguments[0]; if(fumPYaALN1["\x6b\x65\x79\x43\x6f\x64\x65"]==123){ window["\x61\x6c\x65\x72\x74"]('\u8bf7\u5c0a\u91cd\u52b3\u52a8\u6210\u679c\uff01'); return false; }else if((fumPYaALN1["\x63\x74\x72\x6c\x4b\x65\x79"])&&(fumPYaALN1["\x73\x68\x69\x66\x74\x4b\x65\x79"])&&(fumPYaALN1["\x6b\x65\x79\x43\x6f\x64\x65"]==73)){ window["\x61\x6c\x65\x72\x74"]('\u8bf7\u5c0a\u91cd\u52b3\u52a8\u6210\u679c\uff01'); return false; }else if((fumPYaALN1["\x63\x74\x72\x6c\x4b\x65\x79"])&&(fumPYaALN1["\x6b\x65\x79\x43\x6f\x64\x65"]==85)){ window["\x61\x6c\x65\x72\x74"]('\u8bf7\u5c0a\u91cd\u52b3\u52a8\u6210\u679c\uff01'); return false; }else if((fumPYaALN1["\x63\x74\x72\x6c\x4b\x65\x79"])&&(fumPYaALN1["\x6b\x65\x79\x43\x6f\x64\x65"]==83)){ window["\x61\x6c\x65\x72\x74"]('\u8bf7\u5c0a\u91cd\u52b3\u52a8\u6210\u679c\uff01'); return false; }}window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x6f\x6e\x63\x6f\x6e\x74\x65\x78\x74\x6d\x65\x6e\x75"]=function(){ window["\x61\x6c\x65\x72\x74"]('\u8bf7\u5c0a\u91cd\u52b3\u52a8\u6210\u679c\uff01'); return false;}</script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>html, body{height: 100%;}
body{background: #082330;background-size: .12em 100%;font: 16em/1 arial;}
.text--line{font-size: .5em;}
.text--line2{font-size: .2em;}
svg{position: absolute;width: 100%;height: 100%;}
.text-copy{fill: none;stroke: white;stroke-dasharray: 7% 28%;stroke-width: 3px;-webkit-animation: stroke-offset 9s infinite linear;animation: stroke-offset 9s infinite linear;}
.text-copy:nth-child(1){stroke: #360745;stroke-dashoffset: 7%;}
.text-copy:nth-child(2){stroke: #d61c59;stroke-dashoffset: 14%;}
.text-copy:nth-child(3){stroke: #e7d84b;stroke-dashoffset: 21%;}
.text-copy:nth-child(4){stroke: #efeac5;stroke-dashoffset: 28%;}
.text-copy:nth-child(5){stroke: #1b8798;stroke-dashoffset: 35%;}
@-webkit-keyframes stroke-offset{50%{stroke-dashoffset: 35%;stroke-dasharray: 0 87.5%;}}
@keyframes stroke-offset{50%{stroke-dashoffset: 35%;stroke-dasharray: 0 87.5%;}}</style>
</head>
<body>
<svg viewBox="0 0 800 600">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="40%" class="text--line">
404
</text>
<text text-anchor="middle" x="50%" y="60%" class="text--line2">
对不起，页面找不到了！
</text>
</symbol>
<g class="g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
</body>
</html>效果
