源码介绍
太空人丢失错误页面404源码，带有动态特效，可以做网站错误页或者丢失页面，将下面的代码放到空白的HTML里面，然后上传到服务器里面，设置好重定向即可
效果预览
完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Astronaut 404</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<style>@import url("https://fonts.googleapis.com/css?family=Nunito+Sans");
:root {
--blue: #0e0620;
--white: #fff;
--green: #2ccf6d;
}
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
font-family: "Nunito Sans";
color: var(--blue);
font-size: 1em;
}
button {
font-family: "Nunito Sans";
}
ul {
list-style-type: none;
-webkit-padding-start: 35px;
padding-inline-start: 35px;
}
svg {
width: 100%;
visibility: hidden;
}
h1 {
font-size: 7.5em;
margin: 15px 0px;
font-weight: bold;
}
h2 {
font-weight: bold;
}
.hamburger-menu {
position: absolute;
top: 0;
left: 0;
padding: 35px;
z-index: 2;
}
.hamburger-menu button {
position: relative;
width: 30px;
height: 22px;
border: none;
background: none;
padding: 0;
cursor: pointer;
}
.hamburger-menu button span {
position: absolute;
height: 3px;
background: #000;
width: 100%;
left: 0px;
top: 0px;
transition: 0.1s ease-in;
}
.hamburger-menu button span:nth-child(2) {
top: 9px;
}
.hamburger-menu button span:nth-child(3) {
top: 18px;
}
.hamburger-menu [data-state=open] span:first-child {
transform: rotate(45deg);
top: 10px;
}
.hamburger-menu [data-state=open] span:nth-child(2) {
width: 0%;
opacity: 0;
}
.hamburger-menu [data-state=open] span:nth-child(3) {
transform: rotate(-45deg);
top: 10px;
}
nav {
position: absolute;
height: 100%;
top: 0;
left: 0;
background: var(--green);
color: var(--blue);
width: 300px;
z-index: 1;
padding-top: 80px;
transform: translateX(-100%);
transition: 0.24s cubic-bezier(0.52, 0.01, 0.8, 1);
}
nav li {
transform: translateX(-5px);
transition: 0.16s cubic-bezier(0.44, 0.09, 0.46, 0.84);
opacity: 0;
}
nav a {
display: block;
font-size: 1.75em;
font-weight: bold;
text-decoration: none;
color: inherit;
transition: 0.24s ease-in-out;
}
nav a:hover {
text-decoration: none;
color: var(--white);
}
nav[data-state=open] {
transform: translateX(0%);
}
nav[data-state=open] ul li:nth-child(1) {
transition-delay: 0.16s;
transform: translateX(0px);
opacity: 1;
}
nav[data-state=open] ul li:nth-child(2) {
transition-delay: 0.32s;
transform: translateX(0px);
opacity: 1;
}
nav[data-state=open] ul li:nth-child(3) {
transition-delay: 0.48s;
transform: translateX(0px);
opacity: 1;
}
nav[data-state=open] ul li:nth-child(4) {
transition-delay: 0.64s;
transform: translateX(0px);
opacity: 1;
}
.btn {
z-index: 1;
overflow: hidden;
background: transparent;
position: relative;
padding: 8px 50px;
border-radius: 30px;
cursor: pointer;
font-size: 1em;
letter-spacing: 2px;
transition: 0.2s ease;
font-weight: bold;
margin: 5px 0px;
}
.btn.green {
border: 4px solid var(--green);
color: var(--blue);
}
.btn.green:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0%;
height: 100%;
background: var(--green);
z-index: -1;
transition: 0.2s ease;
}
.btn.green:hover {
color: var(--white);
background: var(--green);
transition: 0.2s ease;
}
.btn.green:hover:before {
width: 100%;
}
@media screen and (max-width: 768px) {
body {
display: block;
}
.container {
margin-top: 70px;
margin-bottom: 70px;
}
}</style>
</head>
<body>
<div class="hamburger-menu">
<button class="burger" data-state="closed">
<span></span>
<span></span>
<span></span>
</button>
</div>
<nav data-state="closed">
<ul>
<li>
<a href="http://www.qqmu.com/">Home</a>
</li>
<li>
<a href="https://tool.qqmu.com">Services</a>
</li>
<li>
<a href="https://www.qqmu.com/about">About</a>
</li>
<li>
<a href="http://rvius.jiutaoleyuan.com/14308349">Contact</a>
</li>
</ul>
</nav>
<main>
<!--QQ沐编程 www.qqmu.com 学习QQ群：290987565 域名抢注 https://www.juming.com/t/33210x2a49c4 -->
<div class="container">
<div class="row">
<div class="col-md-6 align-self-center">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 600">
<g>
<defs>
<clipPath id="GlassClip">
<path
d="M380.857,346.164c-1.247,4.651-4.668,8.421-9.196,10.06c-9.332,3.377-26.2,7.817-42.301,3.5
s-28.485-16.599-34.877-24.192c-3.101-3.684-4.177-8.66-2.93-13.311l7.453-27.798c0.756-2.82,3.181-4.868,6.088-5.13
c6.755-0.61,20.546-0.608,41.785,5.087s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z" />
</clipPath>
<clipPath id="cordClip">
<rect width="800" height="600" />
</clipPath>
</defs>
<g