太空人丢失错误页面404源码

CSDN专家-微编程

于 2024-07-16 21:44:30 发布

阅读量161

点赞数 2

分类专栏： HTML项目文章标签： HTML

本文链接：https://blog.csdn.net/technologist_28/article/details/140477729

版权

源码介绍

太空人丢失错误页面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