使用chatGPT生成的404页面

看下最后的效果 继续训练肯定可以更好看

贴上代码

<!DOCTYPE html>
<html>
<head>
	<title>404 Error Page</title>
	<style>
		body {
			background-color: #0c0c0c;
			color: #fff;
			font-family: sans-serif;
			font-size: 18px;
			line-height: 1.6;
			margin: 0;
			padding: 0;
		}

		.container {
			display: flex;
			flex-direction: column;
			height: 100vh;
			justify-content: center;
			align-items: center;
		}

		h1 {
			font-size: 6em;
			margin: 0;
			letter-spacing: -0.05em;
			text-shadow: 0 0 10px #fff;
		}

		h2 {
			font-size: 2em;
			margin: 0;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			margin-top: 20px;
		}

		#spaceship {
			width: 150px;
			height: 150px;
			animation: fly 3s ease-in-out infinite;
			margin-top: 50px;
			position: relative;
		}

		#spaceship:before,
		#spaceship:after {
			content: "";
			display: block;
			position: absolute;
			width: 30px;
			height: 30px;
			background-color: #fff;
			border-radius: 50%;
			animation: flicker 0.5s ease-in-out infinite alternate;
		}

		#spaceship:before {
			top: 0;
			left: 0;
			animation-delay: 0.2s;
		}

		#spaceship:after {
			bottom: 0;
			right: 0;
			animation-delay: 0.4s;
		}

		@keyframes fly {
			0% {
				transform: translateY(0) rotate(0);
			}
			25% {
				transform: translateY(-100px) rotate(-10deg);
			}
			50% {
				transform: translateY(0) rotate(0);
			}
			75% {
				transform: translateY(100px) rotate(10deg);
			}
			100% {
				transform: translateY(0) rotate(0);
			}
		}

		@keyframes flicker {
			0% {
				opacity: 1;
			}
			50% {
				opacity: 0.5;
			}
			100% {
				opacity: 1;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>404</h1>
		<h2>Page Not Found</h2>
		<div id="spaceship"></div>
	</div>
</body>
</html>

附带一个更新维护中404页面

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网站维护更新中，敬请期待</title>
</head>
<style>
*{
 margin:0;
 padding:0;
 }
html{
 height:100%;
 }
body{
 background:#F1FDFE;
 height:100%;
 }
.mom{
 width:600px;
 height:100px;
 line-height:100px;
 text-align:center;
 font-size:30px;
 border-width:5px;
 border-style:dashed;
 border-color:rgb(200, 0, 255);
 position:relative; left:50%;
 margin-left:-300px; top:50%;
 margin-top:-50px;
 background:#e6fafd;
 color:rgb(255, 0, 55);
 }
</style>
<body>
<div class="mom">
 网站维护更新维护中,敬请期待....
</div>
</body>
</html>