404-Run是一个紫色调的跑路单页
源码介绍: 是一个紫色调的跑路单页，这一款是一行文字一行文字自动像输入指令一样的提示，文字可以根据自己喜欢修改即可 界面简洁 演示图如下:
代码如下
代码语言：html复制<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>404-Run</title>
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="404,网站维护">
<meta name="description" content="404,网站维护">
<style>
* { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
vertical-align: baseline; box-sizing: border-box; color: inherit; } body
{ background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
height: 100vh; } h1 { font-size: 45vw; text-align: center; position: fixed;
width: 100vw; z-index: 1; color: #ffffff26; text-shadow: 0 0 50px rgba(0,
0, 0, 0.07); top: 50%; -webkit-transform: translateY(-50%); transform:
translateY(-50%); font-family: "Montserrat", monospace; } div { background:
rgba(0, 0, 0, 0); width: 70vw; position: relative; top: 50%; -webkit-transform:
translateY(-50%); transform: translateY(-50%); margin: 0 auto; padding:
30px 30px 10px; box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5); z-index:
3; } P { font-family: "Share Tech Mono", monospace; color: #f5f5f5; margin:
0 0 20px; font-size: 17px; line-height: 1.2; } span { color: #f0c674; }
i { color: #8abeb7; } div a { text-decoration: none; } b { color: #81a2be;
} a.avatar { position: fixed; bottom: 15px; right: -100px; -webkit-animation:
slide 0.5s 4.5s forwards; animation: slide 0.5s 4.5s forwards; display:
block; z-index: 4 } a.avatar img { border-radius: 100%; width: 44px; border:
2px solid white; } @-webkit-keyframes slide { from { right: -100px; -webkit-transform:
rotate(360deg); transform: rotate(360deg); opacity: 0; } to { right: 15px;
-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; }
} @keyframes slide { from { right: -100px; -webkit-transform: rotate(360deg);
transform: rotate(360deg); opacity: 0; } to { right: 15px; -webkit-transform:
rotate(0deg); transform: rotate(0deg); opacity: 1; } }
</style>
</head>
<body>
<h1>
404
</h1>
<div>
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
开始删除
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
删除成功
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
文件备份自动启用中...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
备份失败 备份文件碎片...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
文件碎片正在加载...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
加载失败 对不起我们跑路了...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
不要伤心 不要难过...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
或许我们还会再建个站继续骗你 ...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
江湖再见啦 ...
</i>
"
<p>
>
<span>
[root@VM-0-7-centos ~]#
</span>
: "
<i>
拜拜了，哈哈哈 ...
</i>
"
</div>
<script>
var str = document.getElementsByTagName('div')[0].innerHTML.toString();
var i = 0;
document.getElementsByTagName('div')[0].innerHTML = "";
setTimeout(function() {
var se = setInterval(function() {
i ;
document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) "|";
if (i == str.length) {
clearInterval(se);
document.getElementsByTagName('div')[0].innerHTML = str;
}
}, 30);
}, 0);
</script>
</body>
</html>本网站资源均来收集于互联网，请勿用于任何商业用途，仅供学习交流
