128 lines
3.2 KiB
HTML
128 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Error</title>
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
|
||
|
|
|
||
|
|
.center-xy {
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
font-family: 'Roboto Mono', monospace;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
box-sizing: border-box;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
*,
|
||
|
|
*:before,
|
||
|
|
*:after {
|
||
|
|
box-sizing: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy-container {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 24px;
|
||
|
|
letter-spacing: .2px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.handle {
|
||
|
|
background: rgb(255, 229, 0);
|
||
|
|
width: 14px;
|
||
|
|
height: 30px;
|
||
|
|
margin-top: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#cb-replay {
|
||
|
|
fill: #666;
|
||
|
|
width: 20px;
|
||
|
|
margin: 15px;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
position: absolute;
|
||
|
|
overflow: inherit;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
fill: #888;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
.typing {
|
||
|
|
width: max-content;
|
||
|
|
white-space: nowrap;
|
||
|
|
animation: typing 3.5s steps(15, end) 1;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.handle{
|
||
|
|
animation: blink-caret .75s step-end infinite;
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
/* 打印效果 */
|
||
|
|
@keyframes typing {
|
||
|
|
from { width: 0; }
|
||
|
|
to { width: 15em; }
|
||
|
|
}
|
||
|
|
/* 光标闪啊闪 */
|
||
|
|
@keyframes blink-caret {
|
||
|
|
from { opacity: 0; }
|
||
|
|
50% { opacity: 0.5; }
|
||
|
|
to { opacity: 1; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="copy-container center-xy" style="display: flex;align-items: center;">
|
||
|
|
<p class="typing">
|
||
|
|
<?php echo $message;?>.
|
||
|
|
</p>
|
||
|
|
<span class="handle"></span>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<svg version="1.1" id="cb-replay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
|
|
x="0px" y="0px" viewBox="0 0 279.9 297.3" style="enable-background:new 0 0 279.9 297.3;" xml:space="preserve">
|
||
|
|
<g>
|
||
|
|
<path
|
||
|
|
d="M269.4,162.6c-2.7,66.5-55.6,120.1-121.8,123.9c-77,4.4-141.3-60-136.8-136.9C14.7,81.7,71,27.8,140,27.8
|
||
|
|
c1.8,0,3.5,0,5.3,0.1c0.3,0,0.5,0.2,0.5,0.5v15c0,1.5,1.6,2.4,2.9,1.7l35.9-20.7c1.3-0.7,1.3-2.6,0-3.3L148.6,0.3
|
||
|
|
c-1.3-0.7-2.9,0.2-2.9,1.7v15c0,0.3-0.2,0.5-0.5,0.5c-1.7-0.1-3.5-0.1-5.2-0.1C63.3,17.3,1,78.9,0,155.4
|
||
|
|
C-1,233.8,63.4,298.3,141.9,297.3c74.6-1,135.1-60.2,138-134.3c0.1-3-2.3-5.4-5.3-5.4l0,0C271.8,157.6,269.5,159.8,269.4,162.6z" />
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</html>
|